一、Vue 基础使用
<body>
<div id="app">
<p v-text="username"></p>
</div>
</body>
<script src="./vue.js"></script>
<script>
// 引用vue js框架后， 浏览器加载完毕vue 框架，window全局就有了一个Vue的构造函数
// 创建Vue 实例对象
const vm = new Vue({
// el属性是固定的写法，表示当前vm实例要控制页面上的哪个区域，接收的值是一个选择器
el: '#app',
data: {
username: '张三'
}
})
</script>
二 、 Vue的指令与过滤器
1、指令的概念
指令： 是vue为开发者提供的模板语法 ， 用于辅助开发者渲染页面的基本结构。
Vue中的指令按照不同的用途可以分为如下6大类：
1）、内容渲染指令
内容渲染指令用来辅助开发者渲染DOM元素的文本内容 ， 常用的内容渲染指令有如下3个：
1》 v-text;
// v-text 代表把变量值渲染到 标签的内容区域（会覆盖标签内部内容）
<div id="app" v-text="username"></div>
// 会覆盖p标签原有内容
<p v-text="gender">性别</p>
2》{{ }} 插值表达式
Vue 提供的{{ }} 表达式 ， 只是内容的占位符，不回覆盖原有内容。
// 只替换占位符的内容
<p>性别：{{ gender }}</p>
// 插值表达式，也支持javascript表达式的运算。
{{ flag ? "YES":"NO"}}
3》v-html
可以把带有标签的字符串， 渲染成真正的 html
data: {
username: '张三',
gender : '女',
info:'<div style=\'color:red\'>sssss</div>'
}
// 会把文本内容 ， 直接显示成文本， 而不认识html标签
<p v-text="info"></p>
// 会识别html 标签，并识别
<p v-html="info"></p>
2）、属性绑定指令
插值表达式只能用于内容节点中， 不能用于属性节点中。
如果要给某个属性，动态绑定值，可用 v-bind 指令，直接在某个属性前面加v-bind: 即可。同时这个指令可以简写成 “:”
// 这两种写法都可以
<input v-bind:placeholder="tip"/>
<input :placeholder="tip"/>
属性表达式里面， 也支持简单的表达式运算
// 在data 中定义了 index变量，如果告诉vue ， 要查找一个叫 index的变量
// 如果在属性绑定指令中，运用表达式，则把固定的字符串用单引号括起来，然后用 + 拼接变量即可 。 实例如下：
<div :id="'id_'+index" :title="'id_'+index">aaaa</div>
3）、事件绑定指令
要想绑定事件，先在Vue构造函数中， 添加: methods 属性，并在methods 对象中添加方法
const vm = new Vue({
// el属性是固定的写法，表示当前vm实例要控制页面上的哪个区域，接收的值是一个选择器
el: '#app',
data: { count : 1 }
methods:{
// 这里可以使用简写的方式，去掉 :function 即可
myclick :function(n) {
// 这里vm ，可以使用this 替代，即：this.count += n
vm.count += n
},
myclick1 (n,e) {
this.count += n
if(this.count % 2 == 0){
e.target.style = "background:red"
}else{
e.target.style = "background:yellow"
}
console.log("================",e)
}
}
})
// 然后在元素中 click 属性绑定这个方法，也可以简写方式：
<button v-on:click="myclick(3)">click</button>
// 简写
<button @click="myclick(3)">click</button>
<!--vue 提供了一个内置对象：$event , 代表的就是原生事件对象 , 如果不传自定义参数，自带了原生事件对象-->
<button @click="myclick1(1, $event)">click</button>
事件修饰符
在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。
event.preventDefault() 这个是停止默认事件处理流程
// 阻止单击事件继续传播
<a v-on:click.stop="doThis"></a>
// 提交事件不再重载页面 ，
<form v-on:submit.prevent="onSubmit"></form>
4）、双向绑定指令
示例
<p>用户名：{{ username }}</p>
// 通过v-model 指令进行双向绑定 ， v-model 在底层监听的就是value属性
<input v-model="username" />
// 通过v-bind 属性绑定， 也可以显示数据，但是当input内容变化时，变量不会变化
<input :value="username"/>
// 通常情况下，可以用 v-model 替换 v-bind:value
v-model 修饰符
v-model.number
<input type="text" v-model.number="n1"/> + <input type="text" v-model="n2"/> = <span>{{n1 + n2}}</span>
// 如果不做限制，input 可以输入任意字符串，有时候我们只允许用户输入数字，那么就可以修饰符的方式控制。
v-model.trim
<input type="text" v-model.trim="username"/>
// 用户在输入框 中字符串前后输入空格，会被自动清理
v-model.lazy
<input type="text" v-model.lazy="username"/>
// 默认情况下，输入框的内容变化会实时同步到变量中，但有时候，我们只需要在输入框失去焦点的时候，才去监听内容。
5）、条件渲染指令
v-if
如果条件是true ，就加载元素，否则就不会解析加载元素
v-show
如果条件是true， 浏览器也会解析元素，但是会把元素隐藏
6）、列表渲染指令
v-for
基础使用，在想要循环生成的元素标签上加上 v-for 指令即可
list:[
{id:1,name :'张三'},
{id:2,name :'李四'},
{id:3,name :'王五'},
]
...
<li v-for="item in list">
{{item.name}}
</li>
// 添加一个列表索引 ， 用到了索引 index ， 就要添加一个:key 属性绑定，并绑定索引 ， 且:key 的值只能是 数字或者字符串，且值不能重复
<li v-for="(item,idx) in list" :title="'id_'+item.name + '_' +idx" :key="idx">
{{item.name}}
</li>
key的注意事项
key的值只能是字符串或数字类型
key的值必须具有唯一性
建议把属性的id属性的值 作为key的值
建议使用v-for指令时，一定要指定key的值
使用index的值当作key的值 没有任何意义
2、过滤器
需要注意的点
过滤器在Vue3.x中已经被作废，
过滤器只用于 插值表达式和 v-bind 属性绑定指令 中
过滤器 由管道符 进行调用
过滤器函数必须有返回值，最后显示的是过滤器函数的返回值
在过滤器的第一个形参就能拿到 实际参数
过滤器函数，必须声明在 filters 属性中（与data、methods 同级）
三、侦听器
侦听变量变化
1、 函数格式的侦听器
<div id="app">
<input type="text" v-model="username">
</div>
const vm = new Vue({
el: '#app',
data: {
username: '张三',
},
// 所有的侦听器 ， 都要定义在watch 属性节点下面
watch :{
// 本质上是一个函数， 要侦听哪个变量，就用这个变量作为方法的名称
username(newVal , oldVal){
console.log("=============newVal ---oldVal", newVal, oldVal)
}
}
})
缺点：
1、进入页面不会自动触发侦听器
2、如果侦听的是一个对象 ，如果对象中的属性发生了变化，不会触发侦听器
2、属性格式侦听器
<div id="app">
<input type="text" v-model="info.username">
</div>
const vm = new Vue({
el: '#app',
data: {
info:{
username: '张三',
}
},
// 所有的侦听器 ， 都要定义在watch 属性节点下面
watch :{
username:{
// 里面的方法名称必须是 handler ， 否则报错
handler(newVal , oldVal){
console.log("=====newVal ---oldVal", newVal, oldVal)
},
// immediate 默认值是false ， 作用是：控制侦听器是否立即执行
immediate : true ,
// deep 默认值是 false , 开启深度侦听 ， 只要对象中的任何属性发生变化，就会触发
deep:true
}
// 侦听对象中的某个属性，需要用单引号括起来，这样只会侦听指定的属性
'info.username':{
handler(newVal , oldVal){
console.log("==========newVal , oldVal" , newVal , oldVal)
},
}
}
})
好处：
1、可以通过immediate 控制，是否立即侦听
2、可以通过deep 控制，是否要深度侦听
3、可以侦听对象中的某个具体属性的变化
三、计算属性
通过一些列运算后， 得到一个属性值，这个计算得到的属性值， 可以在模板结构或methods 方法中使用
const vm = new Vue({
el: '#app',
data: {
r: 0,
g: 0,
b: 0,
},
// 所有的计算属性都要放在 computed 节点中
computed: {
// 计算属性要写成函数的形式
rgb() {
return `rgb(${this.r},${this.g},${this.b})`
}
}
})
// 通过打印vm 对象， 可以发现vm多了一个 rgb 的属性
console.log("=====", vm)
计算属性 与 侦听器的区别
1、computed 是同步的， watch 可以实现异步
2、computed 必须有返回值， watch 里面的函数可以不写返回值
3、同时侦听多个属性变量时，尽量用计算属性
