Vue是一个构建用户界面的渐进式框架。官网:https://cn.vuejs.org/。
Vue可以用网上的CDN,也可以下载到本地(下载的话就是进入官网打开学习文档,点击基础里面的安装,点击里面的开发版本这几个字,建议下载开发版本,里面包含完整的警告和调试模式)
1、创建Vue2实例
首先将下载的vue.js引入到html中,路径按照自己下载的来。
<script src="./vue.js"></script>
弄一个div盒子,给一个id属性
<div id="box01"> <h1>{{msg}}</h1> <h2>{{ age >= 18 ? '成年':'未成年'}}</h2> </div>
创建Vue实例,记得放到script标签里面,el使用id选择器关联上面的盒子,data中存放数据,methods中写方法。Vue实例的作用为关联的DOM提供数据和方法。
<script> const box01 = new Vue({ el:'#box01', data:{ msg:'阿龙', age:20 },
methods:{
} })
</script>
2、插值表达式
插值表达式就是从vue实例中的data拿数据并渲染到页面,使用两个花括号,花括号里面写表达式。拿数据时直接使用data中的数据的变量名。
3、Vue的响应式特性
数据改变,视图自动更新。
访问和修改数据:1)访问数据,"实例.属性名";2)修改数据,"实例.属性名"="值"
4、基本指令
Vue指令就是带有v-前缀的特殊属性,不同属性对应不同功能。
v-html
1.作用:动态解析标签。
2.语法:v-html="表达式"
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<div id="box01"> <div v-html="msg"></div> </div> <script> const box01 = new Vue({ el:'#box01', data:{ msg:`<a href="https://www.baidu.com">阿龙</a>` } }) </script>View Code
v-show
1.作用: 控制元素显示隐藏
2.语法: v-show= "表达式",表达式值true显示,false 隐藏
3.原理:切换display:none控制显示隐藏
4.场景:频繁切换显示隐藏的场景
v-if
1.作用:控制元素显示隐藏( 条件渲染)
2.语法: v-if="表达式",表达式值true显示,false 隐藏
3.原理:基于条件判断,是否创建或移除元素节点
4.场景:要么显示,要么隐藏,不频繁切换的场景
v-else和v-else-if
1.作用:辅助v-if进行判断渲染
2.语法: v-else或v-else-if = "表达式"
3.注意:需要紧挨着v-if一起使用
v-on
1.作用: 注册事件=添加监听+提供处理逻辑
2.语法:
①v-on:事件名= "内联语句"
②v-on:事件名= "methods中的函数名"
3.简写: @事件名
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<div id="box06"> <div style="border: 2px solid #000000;width:300px" class="box"> <h3>阿龙自动贩卖机</h3> <button @click="buy(5)">咖啡5元</button> <button @click="buy(10)">白酒10元</button> </div> <p>余额:{{money}}元</p> <div> <button @click="index--" v-show="index > 0">上一页</button> <img :src="list[index]"> <button @click="index++" v-show="index < 4">下一页</button> </div> </div> <script> const box06 = new Vue({ el:'#box06', data:{ money:100000, index:0, list:[ './img/beautifulGirl01.PNG', './img/beautifulGirl02.PNG', './img/beautifulGirl03.PNG', './img/beautifulGirl04.PNG', './img/beautifulGirl05.PNG', ] }, methods:{ buy(price){ this.money -= price } } }) </script>View Code
v-bind
1.作用: 动态的设置html的标签属性→src、url、title等
2.语法: v-bind:属性名="表达式"
3.注意: 简写形式:属性名="表达式"
v-for
1.作用:基于数据循环,多次渲染整个元素→数组、对象、数字
v-for中的key
语法: key属性="唯一标识"
作用:给列表项添加的唯一标识。 便于Vue进行列表项的正确排序复用。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<div id="box07"> <h3>书架</h3> <ul> <li v-for="item in bookList" :key="item.id"> <span>{{item.name}}</span> <span>{{item.author}}</span> <button @click="del(item.id)">删除</button> </li> </ul> </div> <script> const box07 = new Vue({ el:'#box07', data:{ bookList:[ {id:1,name:"三国演义",author:"罗贯中"}, {id:2,name:"红楼梦",author:"曹雪芹"}, {id:3,name:"西游记",author:"吴承恩"}, {id:4,name:"水浒传",author:"施耐庵"} ] }, methods:{ del(id){ this.bookList = this.bookList.filter(item => item.id != id) } } }) </script>View Code
v-model
1.作用:给表单元素使用,双向数据绑定→可以快速获取或设置表单元素内容
①数据变化→视图自动更新
②视图变化→数据自动更新
理解:将数据从dom元素中剥离出来了,这样我们使用数据将更加便捷。如果是jsp代码的话,还需要将dom元素中每个数据的name设置成和后端实体类中的属性名一致才行。
2.语法: v-model= '变量'