vue.js学习-1-
1. MVVM
附上一张MVVM和MVC的关系图
2. vue基本代码结构
- 导包
引用vue.js的script文件<script src="../node_modules/dist/vue.js"></script>
- 创建需要控制的元素
在这个区域内可以使用vm对象的数据或者方法<div id="app"> </div>
- 创建vm对象
var vm = new Vue({ el: "#app", data: { msg: "", }, methods: { } });
3. vm实例
- el 指定要控制的区域
- data 指定区域内需要用到的数据
- methods 存储区域内需要用到的方法
- 在vm内访问vm中的属性或方法必须用this
4. 基本指令
-
插值表达式
用双重{ }包裹,可以在里面写插值表达式,引用vm实例的数据或者方法<div id="app"> <p>{{msg}}</p> </div>
需要注意的是:
除了v-model是双向绑定数据,其他的一般都是单向:
单向:当vm实例中的数据变化,网页中的数据随之变化,但是网页中的数据变化,并不会使vm实例中的数据变化
-
v-cloak
v-cloak属性可以让网速不好时,不显示表达式的代码 -
v-text
设置该元素的文本值,是直接替换 -
v-html
设置该元素的htmlvm实例
var vm = new Vue({ el: "#app", data: { msg: "Hello Vue", testHtml:"<a href='#'>点击</a>" }, methods: {} });
html代码
<div id="app"> <p>{{msg}}</p> <p v-cloak>{{msg}}</p> <p v-text="testHtml"></p> <p v-html="testHtml"></p> </div>
运行效果:v-text属性只是简单的将字符串放置于标签内部了,而v-html是把字符串解析为了html,再放置于标签内部
-
v-bind
- 绑定元素属性(单向绑定)
- v-bind的三种用法:
- 直接使用v-bind绑定
- 简化指令 使用 :代替v-bind
- 拼接绑定内容
- 以下是三种用法的代码实例:
<!-- v-bind的三种用法 --> <!-- 直接使用v-bind --> <input type="text" name="" v-bind:value="msg"> <!-- 使用 ' :' 简化v-bind --> <input type="text" name="" :value="msg"> <!-- 拼接表达式 --> <input type="text" name="" :value="msg + ' suffix'">
-
v-on
-
v-on用来绑定事件
-
事件的定义是写在vm的methods属性中的
var vm = new Vue({ el: "#app", data: { msg: "Hello Vue", testHtml:"<a href='#'>点击</a>" }, methods: { print(){ console.log("打印方法"); } } });
-
v-on有两种用法
1. 直接使用v-on
2. 使用 ’ @ ’ 简化v-on
html代码<!-- v-on的三种用法 --> <!-- 直接使用v-on --> <input type="button" value="直接使用v-on" v-on:click="print"> <!-- 使用 @ 简化v-on --> <input type="button" value="使用@简化" @click="print">
script代码
var vm = new Vue({ el: "#app", data: { msg: "Hello Vue", testHtml: "<a href='#'>点击</a>" }, methods: { print() { console.log("打印方法"); } } });
-
-
v-model
-
v-model是用来作数据双向绑定的,vue指令中只有这个一个可以用来作数据的双向绑定,其他的一般都是单向
-
用法只有直接使用v-model属性
<!-- v-model 数据双向绑定--> <input type="text" v-model:value="msg">
-
效果演示(注意看页面上的字是随着双向绑定的数据一起改变的)
-
注意v-model只能应用于表单元素上,其他的元素是不起效果的
-
-
v-for
- 是循环迭代的指令
- v-for有三种用法(需要使用index直接在参数中加index)
-
迭代普通数组
<!-- v-for迭代普通数组 --> <div v-for="item in generalList">{{item}}</div> <div v-for="(item,index) in generalList">{{item}} ---- {{index}}</div>
效果演示
-
迭代特殊数组(对象数组)
vm实例代码:var vm = new Vue({ el: "#app", data: { msg: "Hello Vue", testHtml: "<a href='#'>点击</a>", generalList:[11,22,33,44,55,66], objList:[ {id:1,name:"Abor"}, {id:2,name:"XiaoHong"}, {id:3,name:"XiaoMing"} ] }, methods: { print() { console.log("打印方法"); } } });
html代码
<div v-for="(user,index) in objList">{{user.id + ' '+ user.name+' --- '+index}}</div>
效果演示
-
循环遍历对象的属性
vm实例代码:var vm = new Vue({ el: "#app", data: { msg: "Hello Vue", testHtml: "<a href='#'>点击</a>", generalList:[11,22,33,44,55,66], objList:[ {id:1,name:"Abor"}, {id:2,name:"XiaoHong"}, {id:3,name:"XiaoMing"} ], objFor:{ id:3, name:"testObjFor", city:"BeiJing" } }, methods: { print() { console.log("打印方法"); } } });
html代码:
<!-- v-for迭代循环对象属性 --> <div v-for="(val,key,index) in objFor">{{val +' '+key+' --- '+index}}</div>
效果演示
-
迭代数字
<!-- v-for迭代数字 --> <p v-for="(item,index) in 5">{{'这是第'+item+'个标签'}}</p>
效果演示
-
-
v-if
- v-if判断,若判断为false,则从dom中删除该元素
-
v-show
- v-show设置元素的显示状态,若为false,则设置该元素的display为none
- 注意与v-if的原理区别,用动图演示下区别
5. 事件修饰符
-
先上代码:
html<div id="app"> <div class="outerDiv bg-gray" @click="clickOuter"> <div class="innerDiv bg-red" @click="clickInner"> <input type="button" value="按钮" @click="clickBtn"> </div> </div> </div>
vm实例
var vm = new Vue({ el: "#app", data: { msg: "", }, methods: { clickOuter(){ console.log("outer"); }, clickInner(){ console.log("inner"); }, clickBtn(){ console.log("button"); } } });
页面效果
在正常情况下,点击按钮,会依次触发按钮、红色div、灰色div的点击事件,如图
-
.stop
当按钮添加了stop后,会阻止元素的冒泡行为
即当点击按钮时,红色div和灰色div的点击行为会被阻止<input type="button" value="按钮" @click.stop="clickBtn">
效果演示
-
.prevent
在元素事件上添加prevent后会阻止该元素的默认事件,例如a标签的页面跳转事件<a href="http://www.baidu.com" @click="clickLink">百度一下</a>
clickLink(){ console.log("link"); }
a标签默认效果是这样的,触发点击事件,然后跳转页面
当在a标签的click事件添加prevent修饰符后,就不会跳转页面了,阻止了页面跳转这个默认事件,效果如下 -
.capture
当添加了capture事件修饰符的元素捕获到自身被子元素触发事件时,先执行本身的事件,再执行子元素的事件
如图所示,点击按钮:正常是按钮=>红色div=>灰色div
灰色div添加了capture之后就变为了灰色div=>按钮=>红色div
-
.self
当设置了self修饰符后,本身就不会被子元素所捕获了
在灰色div设置self修饰符,点击按钮之后,流程是 按钮=>红色div,不会再执行到灰色div
-
.once
添加once事件修饰符后,本身的事件只会被触发一次
6. v-for 中key属性(number或者string)的使用
-
先上代码
vm实例var vm = new Vue({ el: "#app", data: { msg: "", id: null, name: null, list: [ {id: 1, name: "RED"}, {id: 2, name: "BLUE"}, {id: 3, name: "GREEN"}, {id: 4, name: "YELLOW"}, {id: 5, name: "WHITE"} ] }, methods: { add() { this.list.unshift({id: this.id, name: this.name}); } } });
不加key属性的html代码
<div id="app"> id:<input type="text" name="" v-model:value="id"> name:<input type="text" name="" v-model:value="name"> <input type="button" value="添加" @click="add"> <!-- 不加key属性 --> <p v-for="(color,index) in list" > <input type="checkbox" name="" id=""> {{color.id}} ----- {{color.name}} </p> </div>
-
演示一下不加key属性的bug
可以看到勾选的复选框,随着记录的添加并没有跟随着移动,这显然并不符合我们想要的预期
注意到,他仅仅是固定在了第几个记录,一直固定在第4行的 -
添加key属性的html
<p v-for="(color,index) in list" :key="color.id"> <input type="checkbox" name="" > {{color.id}} ----- {{color.name}} </p>
-
演示一下没有bug的
7. 在vue中绑定样式
-
v-bind:class
-
单个class
<h1 :class='red'>这是一个邪恶的H1</h1>
-
使用数组容纳多个class
<h1 :class="['red', 'thin']">这是一个邪恶的H1</h1>
-
三元表达式
<h1 :class="['red', 'thin', isactive?'active':'']">这是一个邪恶的H1</h1>
-
嵌套对象
<h1 :class="['red', 'thin', {'active': isactive}]">这是一个邪恶的H1</h1>
-
直接使用对象
<h1 :class="{red:true, italic:true, active:true, thin:true}">这是一个邪恶的H1</h1>
-
-
v-bind:style
-
内联样式
<h1 :style="{color: 'red', 'font-size': '40px'}">这是一个善良的H1</h1>
-
将样式定义在vm数据对象上,在绑定数据
data: { h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' } }
<h1 :style="h1StyleObj">这是一个善良的H1</h1>
-
绑定多个vm样式数据对象
data: { h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' }, h1StyleObj2: { fontStyle: 'italic' } }
<h1 :style="[h1StyleObj, h1StyleObj2]">这是一个善良的H1</h1>
-
8. 学习来源-黑马web前端的录播视频
需要JavaEE视频和前端视频的可以直接评论留言你的邮箱,我私发给你