在b站听《辛巴的2020年Vue全套教程》想着听完课记录一下学习笔记方便自己复习~

初始化

• 引用js
• 实例化vm
• 页面设置id="app"
  三件套

指令

其实把握simba老师讲的2个原则就足够了

原则1：{{}} 只能写在html标签的里面，不能写在标签属性"" 的里面

正确写法√

<div>{{niubi}}</div>

错误写法×

<li v-for="{{arr}}"></li> 

那么我偏要在属性中使用变量怎么办呢？
对了，使用指令
那么使用指令之后发生了什么变化呢？

原则2：书写指令之后""内容变成js格式---变量是变量，字符统一加上' '

下面举例三种绑定属性

• img

<img :src="item.img" alt="">

• href

<a :href="'detail.html?name='+item.name">{{item.name}}</a>

这里前半段 'detail.html?name=' 是字符 +后面item.name 是变量。要加以区分

• style

<li  style="width: 100px;height: 150px;background-color: aqua;"></li>

<li  :style="{width: '100px',height: '150px',backgroundColor: 'aqua'}"></li>

style 的转变比较特殊，加了绑定之后""里面是对象，那么修改之后要做3步骤
1.加{ } ，把字符串的; 改成对象的 ,
2.对象的key 直接写，而值 value 要加'' 比如 {width: '100px'} 如果有变量 {width: w+'px'}
3.key 的值不能有 - ，background-color: aqua; 要改写成 backgroundColor: 'aqua' 驼峰的形式

事件

参照原则2，函数可以直接加(参数) 也可以不加

<button @click="del(i)">删除</button>

methods 中的函数不可以是箭头函数，会影响this的指向

双向绑定

• 1.把 js中的变量绑定到标签上

英雄 :<input type="text" :value="addHero">

• 2.给标签绑定事件，来获取标签中的值

英雄 <input type="text" :value="addHero" @input="setHero">

 methods: {
                setHero(e){
                    //e.target指向当前的标签
                    console.log(e.target.value);
                    this.addHero = e.target.value
                }
            }

• 2.2 参照原则2 来优化一下,把js 语句写到标签中，其中$event 代表上面的 e

英雄 <input type="text" :value="addHero" @input=" addHero = $event.target.value"> 

• 3.一来一回 是实现了双向绑定，但是比较麻烦，官方使用了v-model

英雄 <input type="text" v-model="addHero">

总结

我之前自己看官网的时候，指令给我的感觉极其复杂，容易写错，又是: 又是@ 又是{{}} 又是 ''
但是听完simba老师的课，牢记两个原则，不在属性里写{{}} 和一旦绑定之后按照 js 的原则去写，这些概念和符号就不会再混淆了
还有双向绑定的部分也挺精彩的，有种小农经济转到工业革命的畅快~