<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello World!'
})
</script>
</body>
</html>
代码说明:
注意,**不应该使用箭头函数来定义 method 函数** (例如 plus: () => this.a++)。理由是箭头函数绑定了父级作用域的上下文,所以 this 将不会按照期望指向 Vue 实例,this.a 将是 undefined
除了以上常用的三个Vue实例选项, 还有很多选项,后续课程会陆续讲解
<div id="app">
<!-- 在插值表达式中可以访问vm实例中data里面的属性 -->
{{message}}
<p>{{message}}</p>
<p>{{message+'啦啦啦'}}</p>
<p>{{age>18?'成年':'未成年'}}</p>
<p>{{message.split("")}}</p>
<!-- 在插值表达式中不能写js语句 -->
<p>{{var a = 10}}</p>
</div>
<!-- 引入vue.js -->
<script src="./vue.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
message: '我是data中的message属性的值',
age: 20
}
});
</script>
指令 (Directives) 是带有 v- 前缀的特殊特性。
指令特性的值预期是单个 JavaScript 表达式(v-for 是例外情况,稍后我们再讨论)。
指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM。
<div id="app">
<p> {{message}}</p>
<!-- v-on就是vue给标签元素提供的扩展-指令
v-on指令就是给标签绑定事件,这里是click,
当事件处于点击状态时,出发methods中的changeMsg方法
-->
<button v-on:click="changeMsg">按钮</button>
</div>
<!-- 引入vue.js -->
<script src="./vue.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
message: '我是data中的message属性的值',
age: 20
},
methods: {
changeMsg: function() {
this.message += "啦";
}
}
});
</script>
Vue的指令扩展了html标签的功能、大部分的指令的值是js的表达式,取代DOM操作。
很像innerText和innerHTML
v-text:更新标签中的内容
v-text和插值表达式的区别
v-html:更新标签中的内容/标签
<div id="app">
<!-- v-text指令的值会替换标签内容 -->
<p>{{str}}</p>
<p v-text="str"></p>
<p v-text="str">我是p标签中的内容</p>
<p v-text="strhtml">我是p标签中的内容</p>
<p v-html="str"></p>
<!-- v-html指令的值(包括标签字符串)会替换掉标签的内容 -->
<p v-html="strhtml">我是p标签中的内容</p>
</div>
<script src="./vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
str: 'abc',
strhtml: '<span>content</span>'
}
});
</script>
作用:根据表达式的bool值进行判断是否渲染该元素。
<div id="app">
<!-- 如果isShow的值是true ,就显示p标签 -->
<p v-if="isShow">我是p标签中的内容</p>
<p v-show="isShow">我是p标签中的内容</p>
<!-- 如果标签显示与隐藏切换频繁, 就使用v-show
v-show本质是通过修改标签的display值
-->
</div>
<script src="./vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
isShow: false
}
});
</script>
<div id="app">
<!-- v-on.xx事件名='当触发xx事件时执行的语句' -->
<!-- 执行一段js语句:可以使用data中的属性 -->
<button v-on:click="count += 1">增加 1</button>
<!-- v-on的简写方法 -->
<button @click="count += 1">增加 1</button>
<!-- 执行一个方法 -->
<button @click="add">增加 1</button>
<!-- 执行一个方法、这种写法可以传形参 -->
<button @click="fn1(count)">执行fn1方法</button>
<!-- 执行一个方法、这种写法可以传形参,特殊的形参$event -->
<button @click="fn2($event)">执行fn2方法</button>
<hr>
<!-- 和v-for结合使用 -->
<button @click="fn3(index)" v-for="(item, index) in items">执行fn3方法</button>
<!-- v-on修饰符 如 once: 只执行一次 -->
<button @click.once="fn4">只执行一次</button>
<p>上面的按钮被点击了 {{ count }} 次。</p>
</div>
<script src="./vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
count: 0,
items: ['a', 'b', 'c']
},
methods: {
add: function() {
this.count += 1;
},
fn1: function(count) {
console.log(count);
console.log('fn1方法被执行');
},
fn2: function(e) {
console.log(e);
console.log('fn2方法被执行');
},
fn3: function(index) {
console.log(index);
console.log('fn3方法被执行');
},
fn4: function() {
console.log('fn4方法被执行了');
}
}
});
</script>
修饰符
简写: @事件名.修饰符 = ‘methods中的方法名’
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- v-for作用:列表渲染,当遇到相似的标签结构时,就用v-for去渲染
v-for="元素 in 容器(数组和对象)"
v-for="数组中的元素 in data中的数组名"
v-for="对象中的属性值 in data中的对象名"
-->
<!-- 数组 -->
<p v-for="item in list">{{item}}</p>
<hr>
<p v-for="(item,index) in list">{{item}}----{{index}}</p>
<!-- (v,i) in 数组
v:数组中的每个元素
i:数组中元素的下标
-->
<hr>
<!-- 对象 -->
<!-- (v,k,i)in 对象
v:值
k:键
i:对象中每对key-value的索引 从0开始
注意: v,k,i是参数名,见名知意即可!
-->
<p v-for="value in per">{{value}}</p>
<hr>
<p v-for="(value,key) in per">{{value}}----{{key}}</p>
<hr>
<p v-for="(value,key,i) in per">{{value}}----{{key}}--{{i}}</p>
</div>
<script src="./vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
list: ['a', 'b', 'c'],
per: {
name: '老王',
age: 38,
gender: '男'
}
},
methods: {
}
})
</script>
</body>
</html>
注意: 在使用v-for时,要把一个唯一值赋值给:key属性(通常是数组的index或者数据的id)
<div id="app">
<!-- v-for
key属性: 值通常是一个唯一的标识
key是一个可选属性
养成好习惯:建议在写v-for时 设置:key="唯一值"
-->
<ul>
<li v-for="(item,index) in list" :key="index">{{item}}---{{index}}</li>
</ul>
</div>
<script src="./vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
list: ['a', 'b', 'c']
},
methods: {
}
});
</script>
作用: 可以绑定标签上的任何属性。
<div id="app">
<!-- data中的属性值会替换为标签的属性值 -->
<img v-bind:src="src" />
<p v-bind:id="idValue">内容</p>
</div>
<script src="./vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
src: './logo.png',
idValue: 'b'
}
});
</script>
如果isActive为true,则返回的结果为
.active {
color: red;
}
<div id="app">
<div v-bind:class="{active: isActive}">
hei
</div>
<button @click="changeClassName">点击切换类名</button>
</div>
<script src="./vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
isActive: true
},
methods: {
changeClassName: function() {
this.isActive = !this.isActive;
}
}
});
</script>
渲染的结果
<div v-bind:class="[activeClass, dangerClass]">
hei
</div>
<script src="./vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
activeClass: 'active',
dangerClass: 'text-danger'
}
});
</script>
渲染的结果
<div id="app">
<div v-bind:style="{color: redColor, fontSize: font18 + 'px'}">
文本内容
</div>
</div>
<script src="./vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
redColor: 'red',
font18: 18
}
});
</script>
<div v-bind:style="[color, fontSize]">abc</div>
<script>
var vm = new Vue({
el: '#app',
data: {
color: {
color: 'red'
},
fontSize: {
'font-size': '18px'
}
}
});
</script>
<div v-bind:class="{active: isActive}">
</div>
<!-- 可以简化为 :,简化语法更常用 -->
<div :class="{active: isActive}">
</div>
作用: 表单元素的绑定
特点: 双向数据绑定
效果:当文本框的值发生变化后,div中的内容也会发生变化。
<div id="app">
<p>{{message}}</p>
<input type='text' v-model='message'>
<hr>
<!-- v-model其实是语法糖,它是下面这种写法的简写 -->
<input v-bind:value='message' v-on:input='message = $event.target.value' />
</div>
<script src="./vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
message: 'message默认值'
}
});
</script>
<div id="app">
<textarea v-model="message">
我是textarea内的插值表达式 无效 {{str}}
</textarea>
<div>{{ message }}</div>
</div>
<script src="./vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
message: 'message默认值',
str: 'str字符串'
}
});
</script>
注意:多行文本框中使用插值表达式 无效
checked是布尔类型的数据
<input type="checkbox" v-model="checked">
<div>{{ checked }}</div>
此种方式需要input标签提供value属性。v-model绑定的是数组。
<!-- 多个复选框 : 需要设置value属性值, v-model绑定的是数组-->
<div id="app">
<div>
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span>
</div>
</div>
<script src="./vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
checkedNames: []
}
});
</script>
需要input提供value属性的值。
男<input type="radio" name="sex" value="男" v-model="sex">
女<input type="radio" name="sex" value="女" v-model="sex">
{{sex}}
<script>
var vm = new Vue({
el: '#app',
data: {
sex: ''
}
});
</script>
<div id="app">
<!-- 下拉框 -->
<select v-model="selected">
<option disabled value="">请选择</option>
<option>北京</option>
<option>上海</option>
<option>深圳</option>
</select> <span> 您选择的是: {{selected}}</span>
</div>
<script src="./vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
selected: ''
}
});
</script>
问题:在使用vue绑定数据的时候,渲染页面有时会出现变量闪烁,例如:
<div id="app" v-cloak>
<p>{{message}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
message: '我是data中message的数据'
}
});
</script>
效果: 在页面加载时,有时会在页面中看到这个:
{{message}}
解决方案: 使用v-cloak
<div id="app" v-cloak>
<p>{{message}}</p>
</div>
注意:要在css代码部分写如下代码
[v-cloak] {
display: none;
}
这样:就可以防止页面闪烁。
解决的问题:只渲染元素和组件一次,随后的渲染,使用了此指令的元素/组件及其所有的子节点,都会当作静态内容并跳过,这可以用于优化更新性能。
<div id="app">
<p v-once>{{message}}</p>
<input type="text" v-model="message">
</div>
<script src="./vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
message: '我是data中message的属性的值'
}
});
</script>
当添加v-once的指令所对应的元素, 其数据发生改变时,并不会再一次进行渲染。
v-cloak和v-once 不需要表达式, 直接将指令写在开始标签中即可。