Vue初识
- vue 总体感知
- vue中的this
- vue的创建
- Vue中的指令
- 文本渲染指令
- 条件渲染指令
- 事件的绑定指令
- 属性的绑定
- 综合案例---简易的tab切换
- 深入-事件响应
- 列表渲染
- vue表单---v-model
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;
}
}
}
})