5.4 KiB
Vue初体验
新建一个空的项目,引入vue.js文件。写如下代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--vue的版本:2.5.15-->
<script src="vue.js"></script>
</head>
<body>
<!--这个div区域就是MVVM中的 View-->
<div id="div1">
{{name}}
</div>
</body>
<script>
//new出来的对象就是MVVM中的 View Module
var myVue = new Vue({
el: '#div1', //当前vue对象将接管上面的div区域
data: {//data就是MVVM中的 module
name: 'smyhvae'
}
});
</script>
</html>
显示效果:
20180313_0955.png
如果我们在控制台输入myVue.data+='123'
,页面会自动更新name的值。
Vue的系统指令
v-on:注册事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--vue的版本:2.5.15-->
<script src="vue.js"></script>
</head>
<body>
<!--这个div区域就是MVVM中的 View-->
<div id="div1">
<!-- 给button节点绑定按钮的点击事件 -->
{{name}}
<button v-on:click="change">改变name的值</button>
</div>
</body>
<script>
//new出来的对象就是MVVM中的 View Module
var myVue = new Vue({
el: '#div1', //当前vue对象将接管上面的div区域
data: { //data就是MVVM中的 module
name: 'smyhvae'
},
methods: {
change: function() { //上面的button按钮的点击事件
this.name += '1';
}
}
});
</script>
</html>
上方代码中,我们给button按钮绑定了点击事件。注意,这个button标签要写在div区域里(否则点击事件不生效),因为下方的View module接管的是div区域。
插值表达式 {{}}
数据绑定最常见的形式就是使用 “Mustache” 语法(双大括号)的文本插值。例如:
<span>Message: {{ msg }}</span>
Mustache 标签将会被替代为对应数据对象上 msg 属性(msg定义在data对象中)的值。 无论何时,绑定的数据对象上 msg 属性发生了改变,插值处的内容都会自动更新。
{{}}
对JavaScript 表达式支持,例如:
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ name == 'smyhvae' ? 'true' : 'false' }}
{{ message.split('').reverse().join('') }}
但是有个限制就是,每个绑定都只能包含单个表达式,如下表达式无效:
<!-- 这是语句,不是表达式 -->
{{ var a = 1 }}
<!-- 流控制也不会生效,请使用三元表达式 -->
{{ if (ok) { return message } }}
v-text
v-text可以将一个变量的值渲染到指定的元素中。例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--vue的版本:2.5.15-->
<script src="vue.js"></script>
</head>
<body>
<div id="div1">
<span v-text="name"></span>
</div>
</body>
<script>
new Vue({
el: '#div1',
data: {
name: 'hello smyhvae'
}
});
</script>
</html>
结果:
20180313_1645.png
v-html
v-text
是纯文本,而v-html
会被解析成html元素。
注意:使用v-html渲染数据可能会非常危险,因为它很容易导致 XSS(跨站脚本) 攻击,使用的时候请谨慎,能够使用{{}}或者v-text实现的不要使用v-html。
v-cloak
v-cloak
:保持和元素实例的关联,直到结束编译后自动消失。
这个指令和CSS 规则一起用的时候,可以隐藏未编译的标签直到实例准备完毕。比如说,在网络很慢的情况下,通过v-cloak
隐藏元素,当加载完毕后,再显示出来。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*网络很慢时,在span上加上 v-cloak和css样式控制以后,浏览器在加载时会先把span隐藏起来。
直到 Vue实例化完毕以后,v-cloak 会自动消失,那么对应的css样式就会失去作用,最终将span中的内容呈现给用户 */
[v-cloak] {
display: block;
}
</style>
</head>
<body>
<div id="div1">
<span v-cloak>{{name}}</span>
</div>
</body>
<script src="vue.js"></script>
<script>
new Vue({
el: '#div1',
data: {
name: 'hello1 smyhvae22'
}
});
</script>
</html>
v-bind
v-bind
:给html元素或者组件动态绑定一个或多个特性,例如动态绑定style和class。
比如说:
<img v-bind:src="imageSrc">
<div v-bind:style="{ fontSize: size + 'px' }"></div>
上方代码中的imageSrc
和size
其实是Vue实例里面的变量。
上面两行代码可以简写成:
<img :src="imageSrc">
<div :style="{ fontSize: size + 'px' }"></div>
举例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
</style>
</head>
<body>
<div id="div1">
<!-- value里的值只是简单的字符串 -->
<input type="text" value="name">
<!-- 加上 v-bind 之后,value里的值是 Vue 里的变量 -->
<input type="text" v-bind:value="name">
<!-- 超链接后面的path是 Vue 里面的变量 -->
<a v-bind="{href:'http://www.baidu.com/'+path}">超链接</a>
</div>
</body>
<script src="vue.js"></script>
<script>
new Vue({
el: '#div1',
data: {
name: 'smyhvae',
path: `2.html`
}
});
</script>
</html>
效果:
20180313_1745.png