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="表达式"
<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.简写: @事件名
<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进行列表项的正确排序复用。
<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= '变量'