不是跳过了js是笔记写在本子上了哈哈
第一次用框架感觉很爽很快乐（刚踏入第一脚的萌新都是这样省儿的吗
还有哈，这边不会写一些理论的笔记只是知识点的整理和记录
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Day1——vue基础用法+指令+事件修饰符</title><script src="../lib/vue.js"></script>
<!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>--><style>[v-cloak]{
display: none;}input {
background-color: #afd0e1;border-radius: 5px;}.color {
color: #5f80a0}.weight {
font-weight: 300}.word {
letter-spacing: 0.5em}</style></head><body><header><h2>Day 1</h2></header><div id="box"><header><h3>基础指令们</h3></header><ol><!--插值表达式在还未刷新完毕时会被显示，可使用v-cloak配合css将其隐藏--><li v-cloak>-----{
{
msg1 }}(可以加头和尾巴。)</li><!--v-text避免闪烁问题，但会覆写标签内所有内容--><li v-text = 'msg2'>--------</li><li v-html = 'msg3'></li><li>v-bind绑定属性,(当成js代码执行,可再加表达式.)可以省略v-bind只留“:”。</li><li>v-on用于事件绑定。可以简写成"@"。如:<input type="button" value="BUTTON" v-bind:title="mytitle + '加我'" v-on:click = "show">和<input type="button" value="BUTTON" :title="mytitle + '加我'" @click = "show">的效果是相同的。<br/>以上的<a href="#horse">跑马灯小例子</a></li><li>v-model数据双向绑定。<a href="#calculate">简易计算器</a></li><li>v-for循环<ol type="A"><li>迭代数组<dt v-for="(item,i) in arr">索引：{
{
i}}---值： {
{
item}}</dt></li><li>迭代对象中的属性(<a href="#fruit">注意key</a>)<dt v-for="item in objArr" >id: {
{
item.id}}---name: {
{
item.name}}</dt></li><li>迭代对象<dt v-for="(value, key,i) in obj">{
{
key}}---值: {
{
value}}</dt></li><!--所有迭代都有索引属性。迭代数字时从1开始迭代(索引不变)--><li>迭代数字<dt v-for="(count,i) in 3">索引: {
{
i}}---数字: {
{
count}}</dt></li></ol></li><!--v-if切换性能消耗较高，如若涉及到元素频繁切换则建议不要使用v-if。--><li><span v-if="flag">v-if每次都会重新删除或创建元素。</span><span><input type="button" value="点我看效果" @click="flag=!flag"></span></li><li v-show="flag">v-show使元素style的display为或者不为none。</li></ol></div><script>var em = new Vue({
el: '#box',data: {
msg1: '使用插值表达式，用v-cloak避免闪烁。',msg2: '不使用差值表达式，v-text覆写全部内容。',msg3: '<p>v-html可以解析html标签。</p>',mytitle: 'v-bind绑定的属性。',arr: [1,2,3],objArr: [/*求求你记住写引号吧！*/{
id: 1,name: 'Arthur'},{
id: 2,name: 'Alfred'},{
id: 3,name: 'Mathew'}],obj: {
id: 1,name: 'Arthur',gender: '男'},flag: true},methods: {
//定义当前vue实例中所有可用的方法。show:function () {
alert('Hello!')}}});</script><div><header><h3>条件修饰符(可叠加使用)</h3></header><ol><li>".stop"阻止冒泡。</li><li>".prerent"阻止默认事件。</li><li>".capture"添加事件监听时使用捕获。</li><li>".self"只有时间在元素本身(不是在子元素身上)时触发。</li><li>".once"只触发一次。</li></ol></div><div id="style"><header><h3>通过v-bind为元素设置class（style同理）</h3></header><ol><li :class="['color','weight']">使用数组</li><li :class="['color','weight',boo?'word':'']">数组中使用三目运算符</li><li :class="['color','weight',{'word':boo}]">数组中嵌套对象</li><li :class="{color:true, weight:true, word:false}">直接使用对象</li><!--对象的的属性可带引号也可不带引号。--><li :class="classObj1">使用对象改写</li><li :class = "[classObj1,classObj2]">使用对象数组改写</li><li :style="styleObj">style例子</li></ol></div><script>var style = new Vue({
el: '#style',data: {
boo: false,classObj1: {
color:true, weight:true},classObj2: {
word:false},styleObj: {
'color': 'red','font-weight':200}}})</script><div id="horse"><h4>应用1：一个简单的跑马灯效果。</h4><input type="button" @click = "start" value="开始"><input type="button" @click = "end" value="停止"><p v-text = 'sent'></p></div><script>var horse = new Vue({
el: '#horse',data: {
sent: '一会儿你还会再见到我',intervalID: null},methods: {
start: function () {
if(this.intervalID != null) return;/*Lambda表达式的this由上下文来确定。*/this.intervalID = setInterval( () => {
var start = this.sent.substring(0,1);var end = this.sent.substring(1);this.sent = end + start;},100);},/*注意这里函数的两种写法*/end() {
clearInterval(this.intervalID);this.intervalID = null;}}})</script><div id="calculate"><header><h4>应用2: 简易计算器</h4></header><input type="text" v-model="n1"><select v-model="opt"><option value="+">+</option><option value="-">-</option><option value="*">*</option><option value="/">/</option></select><input type="text" v-model="n2"><input type="button" value="=" @click="calc"><input type="text" v-model="result"></div><script>var cal = new Vue({
el: '#calculate',data: {
n1: 0,n2: 0,result: 0,opt: '+'},methods: {
calc() {
switch (this.opt) {
case'+':/*不类型转换会被作为字符串连接*/this.result = parseInt(this.n1) + parseInt(this.n2);break;case'-':this.result = parseInt(this.n1) - parseInt(this.n2);break;case'*':this.result = parseInt(this.n1) * parseInt(this.n2);break;case'/':this.result = parseInt(this.n1) / parseInt(this.n2);break;}}}})</script><div id="fruit"><h4>应用3: 关于v-for的key</h4><input type="text" v-model="id" placeholder="id"><input type="text" v-model="fruit" placeholder="fruit"><input type="button" value="添加" @click="add"><!--使用v-for迭代对象数组要使用key来规定唯一标识值，对data和页面数据进行强制关联。--><!--(如果不使用key，v-for可能会出现问题，例如此例中add新条目后checkbox的勾选错位。)--><!--v-for循环时，key只能使用number或者string。且key的绑定必须使用v-bind。--><p v-for="item in list" :key="item.id"><input type="checkbox">{
{
item.id}}---{
{
item.fruit}}</p></div><script>var fruit = new Vue({
el: '#fruit',data: {
id: '',fruit: '',list: [{
id: 1, fruit: '葡萄'},{
id: 2, fruit: '樱桃'},{
id: 3, fruit: '香蕉'},{
id: 4, fruit: '猕猴桃'},{
id: 5, fruit: '香梨'},{
id: 6, fruit: '青梅'},]},methods:{
add() {
this.list.unshift({
id: this.id, fruit: this.fruit})}}})</script><a href="#box">回到顶端</a></body>
</html>