Vue初识
vue 总体感知
-
作者：尤雨溪
-
渐进式的前端框架
-
思维：1，angular指令思维 2，react组件与虚拟dom思维
-
version：2.x版本
-
vue组件：模板（视图），业务逻辑，指令：联系模板与与业务逻辑
-
el : 指定vue的模板
-
data : 指定vue的初始数据
-
methods : 指定vue的所有事件的函数
vue中的this
- data的数据，methods里面的方法，都会直接挂载到vue实例上面，所以this.数据名，this.方法名，都可以直接访问对应的数据及方法
- 在vue中，this指向vue的实例
vue的创建
- {{内容}} 两个大括号是模板指令，联系业务逻辑和视图模板
- {{内容}} 只能在，定义的vue作用区域来写
- {{内容}} 可以使用见到那的JavaScript语法
- {{‘内容’}} 表现字符使用单引号
// html 的内容
<div id="app">
01,<p>{{1 + 2}}<p> <!-- 这个可以计算 结果为：3 -->
02,<p>{{5 > 3 ? '5是大于3的' : '小于3'}}<p> <!-- 这个可以判断 结果为：5是大于3的 -->
03,<p>{{msg}}<p> <!-- 这个可以链接定义的vue的数据列表的msg 结果为：hello world!!! -->
</div>
// script 标签内部内容
new Vue({
el : "#app", // 这个是用来选择vue作用的内容区域，id使用#，class使用
data : {
msg : "hello world!!!"
}
})
Vue中的指令
// script 标签内部内容
new Vue({
el : "#app", // 这个是用来选择vue作用的内容区域，id使用#，class使用
data : {
msg : "hello world!!!",
rawMsg : "<h1>我爱vue</h1>" , // 在data(数据)中定义数据
flag : false,
}
})
文本渲染指令
v-text=""—渲染vue实例中的data中定义的文本
- 不能识别html标签
- 如果需要在拼接字符串时使用 + ‘字符串’
// 访问
<div id="app">
<p v-text="{{msg}}"></p> <!-- 结果： hello world!!!-->
<p v-text="{{rawMsg}}"></p> <!-- 结果：<h1>我爱vue</h1> -->
<p v-text="{{rawMsg}} + '字符串'"></p> <!-- 结果： <h1>我爱vue</h1>字符串 -->
</div>
v-html=""—渲染vue实例中的data中定义的文本
- 可以识别html标签
// 访问
<div id="app">
<p v-text="{{rawMsg}}"></p> <!-- 结果：一号字体的：我爱vue -->
<p v-text="{{rawMsg}} + '字符串'"></p> <!-- 结果： 一号字体的：我爱vue 子符串 -->
</div>
条件渲染指令
v-if=""—vue中的如果指令，false隐藏，true显示—删除对应p标签的进行隐藏
<div id="app">
<div id="app">
<p v-if="flag">你好世界</p> <!-- flag时false,flag是true时显示 这个会被隐藏---删除对应p标签的隐藏 -->
</div>
</div>
v-else—vue中的否则指令，必须跟v-if同级
<div id="app">
<div id="app">
<p v-if="flag">你好世界</p> <!-- // 如果 flag为假，则不显示 -->
<p v-else>你好vue</p> <!-- // 否则，显示 你好vue -->
</div>
</div>
v-show=""—vue中的判断显示隐藏的指令，true为显示，false为隐藏，display:none的方式隐藏显示
<div id="app">
<div id="app">
<p v-show="flag">你好世界</p> <!-- // 结果：flag为假，所以隐藏 -->
</div>
</div>
v-if 与 v-show-----使用情况
- 通常频繁的切换显示与隐藏建议使用v-show
事件的绑定指令
v-on:事件名=“事件逻辑”—可以把v-on:缩写成@，绑定事件
<div id="app">
<div id="app">
<p v-if="flag">你好世界</p> // 根据flag的真假来判断显示隐藏
<button v-on:click="flag = !flag">显示隐藏</button> <!-- // 通过点击事件来改变flag的真假，使得上面的文字显示隐藏 -->
<button @click="flag = !flag">显示隐藏</button> <!-- // 通过点击事件来改变flag的真假，使得上面的文字显示隐藏 -->
</div>
</div>
属性的绑定
v-bind:属性名=""—属性名可以自定义，可以是已经有的，可以设置属性的值
<div id="app">
<p v-bind:title="msg" v-bind:arr="rawMsg">你好</p> <!-- 检查的时候可以看到 p标签上有一自定义的属性arr，以及title属性，值为对应的值 -->
</div>
综合案例—简易的tab切换
- 目标：三个按钮控制，三个div，只显示一个tab切换
// html 中的内容
<div id="app">
<button @click="current = 0">vue</button>
<button @click="current = 1">react</button>
<button @click="current = 2">angular</button>
<div v-if="current === 0">vue内容</div>
<div v-if="current === 1">react内容</div>
<div v-if="current === 2">angular内容</div>
</div>
// script的代码
new Vue({
el : "#app",
data : {
current : 0, // 默认只显示第0个div
}
})
深入-事件响应
methods:{}—vue的事件需要写在这个属性中
// html 内容
// click事件且传递参数$event,访问时为：鼠标事件
// 如果是keyup，keydowm这类事件的传递参数$event时，访问时为：键盘事件
<div id="app">
<button @click="say($event)">按钮</button>
</div>
// script 内容
new Vue({
el : "#app",
data : {
},
methods : {
say(e) {
console.log(e)
// 这种情况下，有对应元素传递的($event) 访问形参e时，是标准的鼠标事件
alert("你好vue");
}
}
})
列表渲染
v-for="(item,index) in 定义的列表"—vue中的循环，用来遍历列表–类似for in遍历
// html 内容
<div id="app">
<ul>
<!-- item是遍历出的值，index是对应值的下标 -->
<!-- key 给遍历的每个html标签添加一个唯一的标识 -->
<!-- key 最好不要使用index，用户数据的唯一id -->
<!-- :key={{}} 用来虚拟dom的比较时的标识 -->
<li v-for="(item,index) in list" :key="index">{{index}}---{{item}}</li>
</ul>
</div>
// script 内容
new Vue({
el : "#app",
data : {
list : ["vue","js","jQ","React"]
}
})
// 结果
0---vue
1---js
2---jQ
3---React
案例—单击删除对应的元素
// html 内容
<div id="app">
<p v-for="(item,index) in list">
{{index}}---{{item.name}}---{{item.age}}
<button @click="del(item)">删除</button>
</p>
</div>
// script 内容
var vm = new Vue({
el : "#app",
data : {
list : [
{name : "momo",age : 18},
{name : "mm",age : 13},
{name : "uu",age : 15},
]
},
methods : {
del(item) {
var index = this.list.indexOf(item);
this.list.splice(index,1);
//this 指的是 vue实例对象
}
}
})
console.log(vm); // vue的实例对象，里面的都将挂载在vue实例中
vue表单—v-model
- v-model.number 转换为数字
- v-model.lazy 延迟更新，失去焦点时更新
v-model.修饰符=“定义的数据名”—可以实现数据的双向绑定
- 修饰符
- .lazy 失去焦点时才更新
- .number 转换为数字
// html 内容
<div id="app">
<p>{{msg}}</p>
<input type="text" v-model="msg" />
<input type="text" v-model.lazy="msg" /> <!-- 失去焦点时才会更新 -->
</div>
// script 内容
new Vue({
el : "#app",
data : {
msg : "hello"
},
})
案例—同意条款的案例
// html 内容
<div id="app">
<p><label><input type="checkbox" v-model="sel" />同意我们的条款</label></p>
<button :disabled="!sel">下一步</button>
// disabled属性为禁用 如果是false则可以点击，否则不能点击，
</div>
// script 内容
new Vue({
el : "#app",
data : {
sel : false
},
})
案例—v-model的单选，下拉菜单功能绑定
// html 内容
<div id="app">
<h1>你的性别为：{{gender}}</h1>
<label><input type="radio" name="" value="男" v-model="gender" />男</label>
<label><input type="radio" name="" value="女" v-model="gender" />女</label>
<label><input type="radio" name="" value="保密" v-model="gender" />保密</label>
<h1>你的学历为：{{level}}</h1>
<select name="level" v-model="level">
<option value ="胎教">胎教</option>
<option value ="幼儿园">幼儿园</option>
<option value ="小学">小学</option>
<option value ="大学">大学</option>
<option value ="研究生">研究生</option>
</select>
</div>
// script
new Vue({
el : "#app",
data : {
gender : "男",
level : "胎教"
},
})
案例—简易计算器
// html 内容
<div id="app">
<input type="text" name="" id="" value="" v-model.number="s1" />
<select name="suan" v-model="type" >
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" name="" id="" value="" v-model.number="s2" />
<button @click="suan()">=</button>
<input type="text" name="" id="" value="" v-model="result" />
</div>
// script 内容
new Vue({
el : "#app",
data : {
s1 : "",
s2 : "",
result : "",
type : "+"
},
methods : {
calc() {
// this.zong = eval(this.s1 + this.sf + this.s2) // 尽量不推荐使用
if(this.type === "+") {
this.zong = this.s1 + this.s2;
}else if(this.type === "-") {
this.zong = this.s1 - this.s2;
}else if(this.type === "*") {
this.zong = this.s1 * this.s2;
}else if(this.type === "/") {
this.zong = this.s1 / this.s2;
}
}
}
})