一、CDN引入vue
<body>
<div id="app">
{{msg}}
</div>
<!-- 引入开发版本的包 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
<script>
const x = new Vue({
el: '#app',
data: {
msg: 'hello vue'
}
})
</script>
</body>
二、插值表达式
三、响应式介绍
响应式:数据改变,视图自动更新;
使用Vue开发→专注于业务核心逻辑即可。
访问或修改数据:(在控制台里也可以)
- ①访问数据:"实例.属性名"
- ②修改数据:
"实例.属性名"="值”
四、Vue指令
v-html:更新元素的 innerHTML
示例:
|
v-if和v-show
v-if
1.作用:控制元素显示隐藏
2.语法:V-show="表达式
表达式值true显示,false隐藏
v-if
1.作用:控制元素显示隐藏(条件渣染)
2.语法:v-if="表达式"
表达式值true显示,false隐藏v
两者区别:
v-show底层原理:切换css的display:none来控制显示隐藏
v-if底层原理:根据判断条件控制元素的创建和移除(条件渣染),直接移除
v-else和v-else-if![](https://i-blog.csdnimg.cn/direct/2e05dc22e1af4735aa8b7f81e0840f05.png)
<div class="ifelse">
<div v-if="score>=80">优秀</div>
<div v-else-if="score>=60">良</div>
<div v-else>不及格</div>
</div>
v-on:注册事件
<button @click="score--">-</button>
{{score}}
<button @click="score++">+</button>
v-bind:动态绑定一个或多个属性或事件
-
动态属性绑定:
使用v-bind
可以将 Vue 实例中的数据绑定到 HTML 属性上,这样当数据改变时,属性的值也会自动更新。<img v-bind:src="imageUrl[index]">
这里
imageUrl
是 Vue 实例中的一个数据属性,当它的值变化时,src
属性会自动更新。 -
简写形式:
v-bind
可以用冒号:
进行简写,效果是一样的。<img :src="imageUrl[index]">
v-for循环
<div v-for="(item, index) in list">{{item}}->{{index}}</div>
data: {
list:['香蕉', '苹果', '菠萝', '梨']
}
v-model:双向绑定
v-model适用于任何表单元素
<div><input v-model="gender" type="radio" name="gender" value="1">男</div>
<div><input v-model="gender" type="radio" name="gender" value="2">女</div>
<div>
<div id="app">
<select v-model="selectedOption">
<option v-for="option in options" :key="option.id" :value="option.value">
{{ option.text }}
</option>
</select>
<p>你选择了: {{ selectedOption }}</p>
</div>
</div>
</div>
data: {
gender: '2',
selectedOption: '', // 设置默认状态就在value里面选
options: [
{ id: 1, value: 'option1', text: '选项 1' },
{ id: 2, value: 'option2', text: '选项 2' },
{ id: 3, value: 'option3', text: '选项 3' }
] // 对照前面的,只能在value里面选
}
指令修饰符
<div class="Table" style="background-color: darkkhaki;">
<div><input @keyup.enter="add()" v-model="gethings" type="text"> <button @click="add()">添加</button></div>
<div v-for="(item, index) in plans">{{index + 1}} {{item.thing}} <button @click="delthing(index)">删除</button> <br> <br></div>
</div>
计算属性computed
computed和methods![](https://i-blog.csdnimg.cn/direct/b74a3394acc246e79451e975b90e6e36.png)
计算属性完整写法
计算属性基于已有的数据计算出新的值,由于是属性,所有使用{{fullname}}调用;
计算属性里面有get和set方法。
get方法:
- 定义
:get方法
是计算属性的默认行为,用于返回计算后的值。 - 用法: 当你访问计算属性时,
get
会被调用。它可以依赖于 Vue 实例中的其他数据属性,并在这些数据属性变化时自动更新。
set方法:
- 定义:
set
允许你在计算属性被赋值时执行一些操作。它通常用于更新其他数据属性。 - 用法: 当你给计算属性赋值时,值value会传到
set里
调用。你可以在set
中定义如何处理这个新值。
watch监视
<div id="text">
<textarea v-model="obj.rata" name="scaner" id="tell"></textarea>
</div>
watch:{
'obj.rata' (newvalue, oldvalue){ // 方法名不能出现. 所以用引号
console.log("变化了",newvalue);
}
}
五、案例
全选按钮
<div v-for="(item, index) in plans">
<input type="checkbox" v-model="item.ischecked">
{{index + 1}} {{item.thing}}
<button @click="plus(item)">+</button>
{{ item.number }}
<button :disabled="item.number <= 1" @click="reduce(item)">-</button>
<button @click="delthing(index)">删除
</button>
<br> <br>
</div>
<p><input type="checkbox" v-model="isallcheck">全选</p>
<p>总共为{{ totalcount }}</p>
const y = new Vue({
el: '.Table',
data: {
plans: [ // // 要加上ischecked属性
{ id: 1, thing: '玩手机', number: 3 ,ischecked:false},
{ id: 2, thing: "扫地", number: 5 ,ischecked:false},
{ id: 3, thing: "洗碗", number: 6 ,ischecked:false}
]
},
methods: {
plus(item){
item.number++
},
reduce(item){
item.number--
},
delthing(index) {
this.plans.splice(index, 1)
},
add() {
if (this.gethings.trim() === '') {
alert('请输入')
return
} else {
this.plans.push({ id: +new Date(), thing: this.gethings, number:1 })
this.gethings = ''
}
}
},
computed: {
totalcount() {
let total = this.plans.reduce((sum = 0, item) => sum + item.number, 0)
return total
},
isallcheck:{
get(){
return this.plans.every(item => item.ischecked)
},
set(value){
this.plans.forEach(element => {
element.ischecked = value
});
}
}
}
})