02.vue-charp-02 数据绑定
安装vue
cnpm install vue
数据绑定
代码清单:charp-02/2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 示例</title>
</head>
<body>
<div id="app">
<input type="text" v-model="name" placeholder="你的名字"/>
<h1>你好，{{name}}</h1>
</div>
<script src="../node_modules/_vue@2.6.11@vue/dist/vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
name:''
}
})
</script>
</body>
</html>
Vue实例和数据
变量app就代表了这个Vue实例。事实上，几乎所有的代码都是一个对象，写入Vue实例的选项内的。首先，必不可少的一个选项就是el。el用于指定一个页面中已存在的DOM元素来挂载Vue实例，它可以是HTMLElement ，也可以是CSS选择器，比如：
<div id="app"></div>
var app = new Vue({
el: document.getElementById('app') //或者是'#app'
})
挂载成功后，我们可以通过app.$el来访问该元素。
生命周期
Vue的生命周期钩子与之类似，比较常用的有：
-
created 实例创建完成后调用，此阶段完成了数据的观测等，但尚未挂载，$el还不可用。需要初始化处理一些数据时会比较有用，后面章节将有介绍。
-
mounted el挂载到实例上后调用，一般我们的第一个业务逻辑会在这里开始。-
-
beforeDestroy 实例销毁之前调用。主要解绑一些使用addEventListener监听的事件等。
这些钩子与el和data类似，也是作为选项写入Vue实例内，并且钩子的this指向的是调用它的Vue实例：
代码清单:
charp-02/2.1.2.html<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 示例</title> </head> <body> <div id="app"> </div> <script src="../node_modules/_vue@2.6.11@vue/dist/vue.min.js"></script> <script> new Vue({ el: '#app', data: { a: 2 }, created() { console.log(this.a); //2 }, mounted() { console.log(this.$el); // <div id="app"></div> } }) </script> </body> </html>插值表达式 {
{{}}中可以做简单的计算
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 插值表达式</title>
</head>
<body>
<div id="app">
<p>
book: {{book}}
</p>
<p>
date: {{date}}
</p>
<p>
number: {{number/2}}
</p>
<p v-html="link"></p>
</div>
<script src="../node_modules/_vue@2.6.11@vue/dist/vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
book: '《Vue.js》',
date: new Date(),
number: 1000,
link: '<a href="#">v-html输出为html</a>'
},
mounted() {
let _this = this;
this.timer = setInterval(() => {
_this.date = new Date();
}, 1000);
}, destroyed() {
if (this.timer) {
clearInterval(timer);
}
},
})
</script>
</body>
</html>
过滤器
持在{{ }}插值的尾部添加一个管道符“（|）”对数据进行过滤，经常用于格式化文本，比如字母全部大写、货币千位使用逗号分隔等。过滤的规则是自定义的，通过给Vue实例添加选项filters来设置，例如在上一节中实时显示当前时间的示例，可以对时间进行格式化处理：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 插值表达式 - 过滤器</title>
</head>
<body>
<div id="app">
<p>
{{ date|formatDate }}
</p>
</div>
<script src="../node_modules/_vue@2.6.11@vue/dist/vue.min.js"></script>
<script>
//在月份、日期、小时等小于10时前面补
var padDate = function (value) {
return value < 10 ? '0' + value : value;
};
var app = new Vue({
el: '#app',
data: {
date: new Date()
},
filters: {
formatDate: function (value) {
debugger
var date = new Date(value);
var year = date.getFullYear();
var month = padDate(date.getMonth() + 1);
var day = padDate(date.getDate());
var hours = padDate(date.getHours());
var minutes = padDate(date.getMinutes());
var seconds = padDate(date.getSeconds());
//将整理好的数据返回出去
return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;
}
},
mounted() {
let _this = this;
this.timer = setInterval(() => {
_this.date = new Date();
}, 1000);
}, destroyed() {
if (this.timer) {
clearInterval(timer);
}
}
})
</script>
</body>
</html>
指令与事件
指令（Directives）是Vue.js模板中最常用的一项功能，它带有前缀v-，在前文我们已经使用过不少指令了，比如v-if、v-html、v-pre等。
指令的主要职责就是当其表达式的值改变时，相应地将某些行为应用到DOM上，
- v-if 是否显示元素
- v-bind的基本用途是动态更新HTML元素上的属性，语法糖：:
- v-on，它用来绑定事件监听器，语法糖：@
使用v-on:click给该元素绑定了一个点击事件，在普通元素上，v-on可以监听原生的DOM事件，除了click外，还有dblclick、keyup、mousemove等。表达式可以是一个方法名，这些方法都写在Vue实例的methods属性内，
this
函数内的this指向的是当前Vue实例本身，因此可以直接使用this.xxx的形式来访问或修改数据
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 指令与事件</title>
</head>
<body>
<div id="app">
<a target="_blank" v-bind:href="url">百度一下</a>
<a target="_blank" :href="url">百度一下(语法糖)</a>
<h1 v-if="show">你好</h1>
<button v-on:click="showOrHideClick">{{showText}}</button>
<button @click="showOrHideClick">{{showText}}((语法糖))</button>
</div>
<script src="../node_modules/_vue@2.6.11@vue/dist/vue.min.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
show: true,
url: 'http://www.baidu.com'
},
methods: {
showOrHideClick: function () {
this.show = !this.show;
}
},
computed: { //计算属性（有缓存的功能）
showText: function () {
return this.show ? "隐藏" : "显示";
}
},
})
</script>
</body>
</html>
