- 初识vue
<!--首先在页面中引入vue.js文件-->
<!--HTML页面相当于mvvm结构的view层-->
<!--这种mvvm的展现数据的方式:数据驱动页面闪现,data中数据如果发生改变,页面同时跟着改变.-->
<body>
<div id="app">
<!--在本作用域中完成项目的所有业务逻辑.-->
<!--利用插值表达式{{}}将数据展示在页面上-->
{{msg}} <!--Hello Vue.js！-->
</div>
<script type="text/javascript">
new Vue({
//规定作用域
el:"#app",
//放置所有数据
data:{
msg:"Hello Vue.js！"
}
});
</script>
</body>- 插值运算符{{ }}
- 插值表达式中,除了null和undefined都可以展现到页面上.
- js中的关键字不能在插值运算符中使用,包括var , if , for
- 在{{ }}中可以进行简单的运算,判断时可以使用三元运算符,可以用一些js原生的方法.
- {{ }}中只能使用不改变原数组的方法.
- 指令(1)
v-text
- v-text与{{ }}一样用于展现数据.
- {{ }}是v-text的缩写形式,一般情况下 {{}}和v-text通用.
- 插值表达式在先加载html后加载vue.js框架的情况下,可能会出现{{}}一个很丑标记,而v-text内部进行了处理,在数据加载完之前,先将元素进行隐藏.
v-html
- v-html同样也是用于展示数据.
- 与{{ }}和v-text区别在于v-html会编译字符串中的标签,{{ }}和v-text不会.
<div id="app">
<!--v-html会编译字符串中的标签,{{}}和v-text不会-->
<div v-text="msg"></div> <!-- 显示：<p>Hello World</p> -->
<div v-html="msg"></div> <!-- 显示：Hello World -->
</div>
<script>
new Vue({
el:"#app",
data:{
msg:"<p>Hello World</p>"
}
})
</script>v-cloak
/* 当插值表达式{{ }}在先加载html后加载vue.js框架的情况下使用时，
可能会先出现{{ }} 标记再把数据渲染出来，导致一个页面闪烁问题. */
/* 解决方法: 1. 在{{ }}外套一个标签,标签上挂载v-cloak指令
2. 在style标签中书写相应样式:*/
例： <style>
[v-cloak]{
display: none;
}
</style>
/*在作用域里写*/
<div v-cloak>
{{sayHi}}
</div>v-on
- 与原生js相比,就是把on变成v-on
- v-on可以缩写成@
<div id="app">
<button v-on:click="dothis()">点我</button>
<button @click="dothis()">点我</button>
<!--在没有参数的情况下,函数后边的小括号可加可不加.-->
<button @click="dothis">点我</button>
<!-- 点击按钮count值自增 -->
{{count}}
<!--页面上放置的数据,在data中是绑定起来的-->
</div>
<script>
new Vue({
el: "#app",
data: {
count: 1
},
// methods属性用于添加函数
methods: {
dothis: function () {
// 如何在methods的函数中获取到data值,前边加this
this.count++
}
}
})
</script>- 事件修饰符
.stop
- .stop是简便方法阻止事件冒泡.
- 如果想在参数中传递原生event对象,可以使用$event内置方法.
<div id="app">
<!--添加事件的修饰符-->
<div @click="doTwo">
外层父容器
<div @click.stop="doOne('hello',$event)">
内层子节点
</div>
</div>
</div>
<script>
new Vue({
el: "#app",
data: {},
methods: {
doOne: function () {
alert("内层子节点");
},
doTwo: function () {
alert('外层父容器');
}
}
})
</script>.prevent
- .prevent用于取消默认事件.
<div id="app">
<!--取消了a标签的默认跳转,弹出alert内容,点击确认后页面不会跳转了-->
<a href="http://baidu.com" @click.prevent="pre">点我跳啊!</a>
</div>
<script>
new Vue({
el: "#app",
data: {},
methods: {
pre(){
alert("禁止默认事件.prevent");
}
}
})
</script>keyCode
- keycode修饰符用于键盘事件制定按键功能.
<div id="app">
<!-- keydown 和 keyup 都可以触发 -->
<!-- enter键对应的是数字13 -->
<input type="text" @keyup.13="keyc">
<input type="text" @keyup.enter="keyc">
<input type="text" @keydown.login="keyc">
</div>
<script>
//自定义配置按键名称
Vue.config.keyCodes.login = 13;
new Vue({
el: "#app",
data: {
count: 1
},
methods: {
keyc: function () {
alert("键盘事件修饰符");
}
}
})
</script>- 指令(2)
v-bind
- v-bind是绑定属性用的.
- 例：↓ ↓ ↓
<style>
.div1 {
background-color: red;
}
.div2 {
color: yellow
}
</style>
<div id="app">
<!--v-bind将data中的值注入到标签的属性上-->
<div v-bind:id="id">Hello</div> <!-- <div id="div1">123</div> -->
<!--缩写 将v-bind去掉-->
<div :id="id">Hello</div>
<!--一个静态字符串和data中的值进行组合当做a标签的href-->
<!--v-bind后直接赋值一个字符串嵌套对象的格式,对象的key是属性名,value静态字符串与data中数据的链接-->
<a v-bind="{'href':'http://xxx.com'+url}"></a>
<!-- 缩写 -->
<a :href="'http://xxx.com'+url"></a>
<!--下边这两种写法等价-->
<div class="div1 div2">Hello</div>
<div :class="[color1,color2]">Hello</div>
<!-- 下面这种写法会报错，因为会把"color1 color2" 识别成一个值 -->
<!-- <div :class="color1 color2">Hello</div> -->
<!--动态绑定style 行内样式-->
<div v-bind:style="[style1,style2]">Hello</div>
</div>
<script>
new Vue({
el: "#app",
data: {
id: "div1",
url: "/aa/bb",
color1: "div1",
color2: "div2",
style1:{color:"pink"},
style2:{'background-color':'skyblue'}
}
})
</script>v-for
- 循环遍历
- 案例：将data中的数据带入到页面的li上.
<div id="app">
<ul>
<!--基础用法-->
<!--v-for的使用方法 in运算符前是数组的每一项,这个变量自己可以随便定义-->
<!--in运算符后边是data的数据,因为我们是渲染列表,所以,数据只能是数组类型和对象类型-->
<li v-for="item in arr">{{item}}</li>
</ul>
<!--
显示：
1
1
1
-->
<ul>
<!--循环数组时,如果in运算符前边是(),可以接受两个参数-->
<!--第一个是数组中的每一项,第二个参数,是每一项值的index索引-->
<li v-for="(item,index) in arr">{{index}}-{{item}}</li>
</ul>
<!--
显示：
0-1
1-1
2-1
-->
<ul>
<!--循环对象-->
<!--如果循环的数据是一个对象.那么in前边的小括号内第一个参数是对象的每一个值value,第二个参数是每一个值的key键,三个参数是索引index-->
<li v-for="(value,key,index) in obj">{{index}}-{{key}}-{{value}}</li>
</ul>
<!--
显示：
0-a-1
1-b-2
2-c-3
-->
<!--diff算法.key值是当数据重新渲染时,提高运行效率用的.原则上写v-for时给加上-->
<button @click="changeArr">点我item加1</button>
<ul>
<li v-for="(item,index) in arr" :key="index">{{index}}-{{item}}</li>
</ul>
<!--
点击按钮item自增：
0-item
1-item
2-item
-->
</div>
<script>
new Vue({
el: "#app",
data: {
arr: [1,1,1],
obj:{a:1,b:2,c:3}
},
methods:{
changeArr:function () {
//在函数中,改变data中的变量时要注意
//改变原数组的方法可以直接用,不改变原数组的方法需要赋值回原数组
//this.arr.push('d')
this.arr = this.arr.map(function (item, index) {
return item+1
})
}
}
})
</script>v-if
- v-if v-else
- v-if v-else-if v-else
- template标签
<div id="app">
<!--v-if用来控制标签的显示和隐藏,如果等号后边的data变量是true显示,false隐藏-->
<!--v-else类似于原生js的逻辑,当v-if值为false的时候显示标签二-->
<button @click="show">点我</button> <!-- 点击按钮触发show方法 -->
<div v-if="sh">我是标签一</div> <!-- 当sh是true的时候默认显示 当点击上面按钮的时候sh变为false时标签一隐藏(整个标签结构都没了)-->
<div v-else>我是标签二</div> <!-- 标签一隐藏 显示标签二 show方法来回改变sh的值 所以标签一和标签二来回切换 -->
</div>
<script>
new Vue({
el: "#app",
data: {
sh: true,
},
methods: {
show: function () {
// this 指的是Vue实例对象
this.sh = !this.sh; // 取反(当sh为真时改为假，反之为假时改为真)
}
}
})
</script> <!-- v-if v-else-if v-else 的用法 -->
<div id="app">
<div v-if="str =='a'">我是标签一</div>
<div v-else-if="str =='b'">我是标签二</div>
<div v-else>我是标签三</div>
</div>
<script>
new Vue({
el: "#app",
data: {
str: "b"
}
})
</script>
<!-- 当str的值是b的时候就现实标签二 --> <div id="app">
<!--可以使用template标签代替div包裹多个元素,template标签不可见-->
<button @click="show">点我啊</button>
<template v-if="sh">
<h1>Title111</h1>
<p>Paragraph 222</p>
</template>
<template v-else>
<h1>Title222</h1>
<p>Paragraph 333</p>
</template>
</div>
<script>
new Vue({
el: "#app",
data: {
sh: true,
},
methods: {
show: function () {
// this 指的是Vue实例对象
this.sh = !this.sh; // 取反(当sh为真时改为假，反之为假时改为真)
}
}
})
</script>v-show
<div id="app">
<!--一般来说,一个元素进行显示隐藏用v-show,效率比较高-->
<!--因为v-show不能和v-else和v-else-if一起使用,所以v-show只能控制一个元素的显示和隐藏-->
<div v-show="sh">我是v-show</div>
</div>
<script>
new Vue({
el: "#app",
data: {
sh: true,
},
methods: {
show: function () {
// this 指的是Vue实例对象
this.sh = !this.sh; // 取反(当sh为真时改为假，反之为假时改为真)
}
}
})
</script>- 单项数据绑定和双向数据绑定
- 单项数据绑定
<div id="app">
<!--v-bind单项数据绑定,改变页面的值并不影响data中的值-->
<input type="text" :value="msg">
<input type="text" :value="msg">
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
msg: "Hello World",
}
})
console.log(vm);
</script>- 双向数据绑定
<div id="app">
<!--不仅data中的数据可以影响到view页面,而且view页面发生改变时,同样可以改变data中的数据,这个就叫双向绑定-->
<!--v-model内部绑定的是value,所以要求标签必须有value属性才能用-->
<!--应用:在登录页面中可以通过双向绑定的方式,利用data中的值,获取到页面的改变-->
<input type="text" v-model="msg">
<input type="text" v-model="msg">
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
msg: "Hello World",
}
})
console.log(vm); // 改变data中msg的数据,view页面的值也跟着改变,改变view中的值,data中的msg数据也跟着改变
</script>- v-model中的修饰符
.lazy
.number
.trim
<div id="app">
<!--.lazy 当光标移除文本框时 才进行双向绑定,也就是说延迟了双向绑定-->
<input type="text" v-model.lazy="msg">
<input type="text" v-model="msg">
<!--.number 当输入的是一段数字字符串的时候,使用.number会自动转化为number类型.-->
<button @click="getValue">获取</button>
<input type="text" v-model.number="value">
<!--.trim 去除左右两边的空格-->
<input type="text" v-model.trim="msg">
<input type="text" v-model="msg">
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
msg: "hello world",
value:""
},
methods:{
getValue:function () {
console.log(typeof this.value);
}
}
})
</script>产品案例
功能分析
- 在data中定义一组数组，供我们使用，arr [ { name , time } , { name , time } , {} ] 构建一个json
- v-for用遍历数组的方式将数据进行展现
- 添加操作，设置文本框和按钮，当点击按钮时，将文本框的数据添加到arr数据数组中，使用mvvm的渲染方式会直接改变页面的结构 ( push )
- 删除操作，确认删除行的index索引，传入函数中 ( splice )
编号 品牌名称 创建时间 操作
1 宝马 2017-12-1 11:11:11 删除
2 奥迪 2017-12-1 12:12:12 删除 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="引入vue.js文件"></script>
<style>
table {
width: 800px;
text-align: center;
border: 1px solid #000;
border-collapse: collapse;
margin: 0 auto;
}
table th {
background-color: #0094ff;
color: #fff;
}
table th, table td {
border: 1px solid #000;
padding: 2px;
}
</style>
</head>
<body>
<div id="app">
<input type="text" placeholder="品牌名称" v-model="value" @keyup.add="add"/>
<button @click="add">添加数据</button>
<table>
<tr>
<th>编号</th>
<th>品牌名称</th>
<th>创建时间</th>
<th>操作</th>
</tr>
<tr v-for="(item,index) in arr">
<td>{{index+1}}</td>
<td>{{item.name}}</td>
<td>{{item.time}}</td>
<!--渲染列表时的index可以传入到函数中作为每一个列表项的唯一标示-->
<td><a href="#" @click.prevent="del(index)">删除</a></td>
</tr>
</table>
</div>
</body>
<script>
Vue.config.keyCodes.add = 13;
new Vue({
el: "#app",
data: {
// 在这里定义一组数据,供展现使用
arr: [
{name: "宝马", time: new Date},
{name: "奔驰", time: new Date},
{name: "大众", time: new Date}
],
//定义input上添加的数据
value:""
},
methods:{
//添加数据函数
add:function () {
//获取input框中的值
var value=this.value;
// 将input框中的value追加到arr数据中
this.arr.push({name:value,time:new Date});
//将input框置空
this.value="";
},
del:function (index) {
//从当前索引开始删除一个，相当于删除了本身
this.arr.splice(index,1);
}
}
})
</script>
</html>