vue2 基本使用
一、模板
- 插值、表达式
-
-
<template>
<div>
p>文本插值 {{message}}</p> <p> js 表达式 {{flag: 'yes' : 'no'}} (只能是表达式，不能是 js语句)</p>
</div>
</template> export default(){ data(){ return { message:'hello vue', flag: true } } }
-
-
- 属性
-
- data: 定义组件的初始数据
- props: 传递数据给子组件
- computed: 定义计算属性
- methods: 定义组件的方法
- watch: 监听组件的数据变化
- components: 注册子组件。将其他组件注册为当前组件的子组件，从而在模板中使用这些子组件
-
- 指令:
-
- v-if: 条件渲染指令，根据表达式的真假来决定是否渲染该元素
- v-show： 条件显示指令，根据表达式的真假来决定元素的显示和隐藏
- v-for: 列表渲染指令，根据数据源循环渲染列表元素
- v-bind： 属性绑定指令， 动态绑定属性
- v-on： 事件绑定指令，用于监听 DOM事件，并执行对应的方法
- v-model: 数据双向绑定指令，用于在表单和vue实例的数据之间建立双向绑定关系
- v-text： 文本插值指令，将数据插入到元素的文本内容中
- v-html： HTML 插值指令，将数据作为HTML解析并插入到元素中。会有XSS 风险，会覆盖
-
二、computed 和 watch
1.computed 介绍
-
-
- computed 用来监控自己定义的变量，该变量在data 内没有声明，直接在computed中定义。
- computed 中定义的属性值是对象时，那么对象中会定义一个get 方法和 一个set 方法，获取时调用get方法，数据变化时调用set方法
- computed 中定义的属性值是函数时，那么默认会走get方法，必须要有一个返回值，函数的返回值就是该属性的属性值
- computed 中定义的属性值会被缓存，只有当依赖数据发生变化时才会重新计算，这样可以避免重复计算提高性能（当页面中多处引用时，只要值不变就会直接从缓存中获取结果，不会重新计算）
-
<template>
<div>
<p>{{perName}}</p>
<p>{{perName}}</p>
<button @click="onClick>点击</button>
</div>
</template>
<script>
export default {
data(){
per:{
name: '张三',
age: 18
}
},
methods:{
onClick(){
this.perName = 'lisi'
}
},
computed: {
// 属性值是函数的情况
perName(){
console.log('1111') //只执行一次
return this.per.name //是函数时必须有return
},
// 属性值是对象的时候，设置get 和 set方法
perName:{
get(){ //读取时候调用
this.per.name
},
set(newVal){ //设置的时候调用
this.per.name = newVal
}
}
}
}
</script>
2. watch 介绍
-
-
- watch 是检测data 内声明的数据。
- watch 监听简单数据，可以获得新旧两个值
- watch 检听对象时，需要使用深度监听，此时拿到的新旧两个值时一样的（因为他们存储的指针地址是同一个）。所以深度监听可以检测到数据变化，但不能检测到哪个属性发生了变化
- watch 监听props 组件传过来的值时，第一次加载页面时不会执行，需要设置immediate:true 才会在第一次加载时执行
-
<template>
<div class="hello">
<p>{{per.name}}</p>
<button @click="onclick">按钮</button>
</div>
</template>
<script>
export default {
data () {
return {
per:{
name:'zhangsan',
age: 19
}
}
},
methods:{
onclick(){
this.per.name = 'zhangsan2'
},
},
watch:{
//监听对象某个属性
'per.name': function(newVal,oldVal) {
console.log(newVal,'newVal')
console.log(oldVal,'oldVal')
},
//监听整个对象，需要深度监听
per:{
handler(newVal,oldVal){
console.log(newVal,oldVal) //是对象类型的数据时，检测不到之前的数据，即newVal 和 oldVal 相等。因为这两个值存储的地址相同
},
deep: true, //深度监听
immediate: true //组件加载时，会立即出发回调函数（即第一次加载时就会触发，默认第一次不会触发）
}
}
}
</script>
3.二者区别：
-
-
- computed 是计算属性；而 watch 是监听，并且监听的是 data 中的数据 或者 props传过来的数据
- computed 不支持异步； 而 watch 支持异步操作
- computed 支持缓存，依赖的属性值发生变化，计算属性才会重新计算，否则用缓存（所以计算新的属性值时不会用method,method中定义的方法没有缓存，页面上引用几次就出触发几次函数执行。）。
- computed 第一次加载就监听；watch 第一次不监听（除非设置immediate:true,第一次才会监听）
- computed 属性值是函数时，必须有return。而watch 不用
- 当一个属性受多个属性影响的时候，使用computed(一对多)，例如：购物车结算（total = count * price)
- 当一条数据影响多条数据的时候，使用watch(多对一)，例如：搜索框
-
三、class 和 style
class:
-
- 对象语法
-
-
<div class="static" :class="{'active': isActive,'text-danger':hasError}"></div>
<div :class="classObject"></div> <script> export default { data(){ return { isActive: true, hasError: false,
classObject: {
active: true,
'text-danger': false
}
} } } </script>
-
-
- 数组语法
-
-
-
<div class="static" :class="[activeClass,errorClass]"></div>
<!--数组中可以使用三元表达式，对象中不可以使用三元表达式-->
<div :class="[isActive? activeClass : '', errorClass]"></div>
<!--- 数组中也可以使用对象-->
<div :class="[{'active': isActive} , errorClass]"></div>
<script>export default { data(){ return { activeClass:'active', errorClass:'text-danger',
isActive: true } } } </script>
-
-
-
- 对象语法
style:
1. 绑定对象：
<div class="static" :style="{'color': activeColor, fontSize: '12px'}"></div>
<!--数组中可以使用三元表达式，对象中不可以使用三元表达式-->
<div :style="styleObject"></div>
<script>
export default {
data(){
return {
activeColor:'red',
styleObject:{color: red,'font-size': 12px}
}
}
}
</script>
2. 绑定数组: 多个样式对象可以用数组形式
<div class="static" :style="[baseStyle,styleObject"></div> <script> export default { data(){ return { activeColor:'red', styleObject:{color: red,'font-size': 12px}, baseStyle: { fontSize: 16px;} } } } </script>
四、条件
-
- v-if: 指令的表达式返回真时才渲染
- v-else：搭配v-if,为v-if 添加一个 else区块
- v-else-if： 提供的时相应于 v-if 的 else if 区块。
- v-show：按条件显示一个元素
v-if 与 v-show 区别：
-
-
-
- v-if 只有在条件为true时才会被渲染，切换时，条件区块内的事件监听和组件都被销毁与重建
- v-show 无论条件真假都会被渲染，切换时只是css中的display 被切换（显示/隐藏）
- v-if 切换开销比较高，而v-show 初始渲染开销高。所以，频繁切换则使用v-show，如果条件很少改变则使用v-if
-
-
五、循环
v-for：
-
-
- 可以遍历数组 或者 对象的所有属性
- v-for 可以接受一个整数值n，取值范围是 1 ~ n ,而不是0 ~ n
<span v-for="n in 10">{{n}}</span> <!--- 此处的n 初始值是 1 而不是 0-->
-
v-for 与 v-if 为什么不推荐在同一个节点上使用：
-
-
- 在 vue2 中，v-for 的优先级高于 v-if
- 在 vue3 中，虽然 v-if 优先级高于 v-for，但官方仍不见一同一个元素使用，
-
六、事件
-
- v-on （简写 @）
- 事件修饰符：以 . 开头的指令后缀
- .stop 停止事件传递（阻止冒泡）
- .prevent 阻止事件的默认行为
- .capture 使用事件捕获模式
- .self 只当事件在该元素本身触发时触发回调
- .once 事件只触发一次
- .passive 使得滚动等事件的默认行为立即执行，不等待事件回调完成
七、表单
v-model： 是一个语法糖，实际上是一个双向绑定。v-model 可以用在不同类型的输入input、textarea、select。
实现v-model 的核心：1）使用value 属性创建一个双向绑定；2）监听input 事件以更行数据
-
-
- <input> 和 <textarea> 会绑定value 属性 并且 侦听 input 事件
<input v-model="text"> <!--- v-model 手动实现， 上面的写法等价于下面的写法--> <input :value="text" @input="updateText"> export default{ data:{ text:'' }, methods:{ updateText(event){ this.text = event.target.value } } }-
<input type="checked"> 和 <input type="radio"> 会绑定 checked 属性，并监听 change 事件
-
<select> 会绑定 value 属性 ，并监听 change事件
-
- <input> 和 <textarea> 会绑定value 属性 并且 侦听 input 事件
-
修饰符：
-
-
- .lazy :
<!-- 在 "change" 事件后同步更新而不是 "input", 用作防抖 --> <input v-model.lazy="msg" />
- .number :
<!--让用户输入自动转换为数字，你可以在 v-model 后添加 .number 修饰符来管理输入--> <input v-model.number="age">
- .trim:
<!--自动去除用户输入内容中两端的空格--> <input v-model.trim="msg" />
- .lazy :
-
浙公网安备 33010602011771号