在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 的原则去写，这些概念和符号就不会再混淆了
还有双向绑定的部分也挺精彩的，有种小农经济转到工业革命的畅快~
