Vue 学习笔记入门篇-数据绑定，指令，事件
2.1.1 vue 实例和数据绑定
//---- 环境搭建------
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
通过构造函数 Vue 就可以创建一个 Vue 的根实例，并启动 Vue 应用---入口
<div id = "app">
{{msg}}
</div>
var app ＝new Vue({
//element, 用于指定页面中己存在的 DOM 元素，挂载到DOM中，也可以是CSS
el:'#app',
//声明应用内需要双向绑定的数据
data:{ msg: "vue"}
})
el:
el 用于指定一个页面中己存在的 DOM 元素来挂载 Vue实例,可以是标签。也可以是css语法
data:
通过 Vue 实例的 data 选项，可以声明应用内需要双向绑定的数据。建议所有会用到的数据都预先在 data 内 声明，这样不至于
将数据散落在业务逻辑中，难以维护。也可以指向一个已经有的变量。
挂载成功后，我们可以通过app.$el
来访问该元素。Vue 提供了很多常用的实例属性与方法。
注意
- -- 访问Vue实力的属性：都是以
el
- -- 访问data元素的属性 -- 世界使用app.属性名, 如app.msg
2.1.2 生命周期钩子
jquery---$(document).ready()
* created: 实例创建完成后调用，此阶段完成了数据的观测等，但尚未挂载， $el 还不可用。需要初始化处理一些数据时会比较有用，后面会学习到----还未挂载到DOM元素时。
* mounted: el 挂载到实例上后调用，一般我们的第一个业务逻辑会在这里开始 。相当于 $(document).ready()---刚刚挂载
* beforeDestroy: 实例销毁之前调用。主要解绑一些使用 addEventListener 监听的事件等。
2.1.3 文本插值和表达式
语法： 使用双大括号（Mustache语法）"{{ }}"是最基本的文本插值方法，他会自动将我们双向绑定的数据实时显示出来。
用法：
在{{ }}中，处了简单的绑定属性值外，还可以使用JavaScript表达式进行简单的运算、三元运算等---实例：
Vue.js只支持单个表达式，不支持语句和流控制
{{ 6+6 *3}}---可以进行简单的运算 <br>
{{ 6<3 ? msg :a}}---可以用三元运算符 <br>
不支持的的：
{{if(6>3){}}-----注意：文本插值的形式，其中不能书写表达式,支持单个表达式
{{var a = 6}}--也是多行表达式----var a ;a = 6;
〈！一这是语旬，不是表达式 一〉
{ { var book = ’ Vue . js ’ ｝｝
〈！一不能使用流控制，要使用三元运算 一〉
{{ if (ok) return msg ))
2.2.2 过滤器
- Vue. 支持在｛｛｝｝插值的尾部添加一小管道符 “ | ” 对数据进行过滤，经常用于格
式化文本，比如字母全部大写、货币千位使用逗号分隔等。 - 过滤的规则是自定义
的， 通过给 Vue 实例添加选项 filters 来设置
过滤器：
{{ data | filter1 |filter2}}
{{date | formatDate(66,99)}} 中的第一个和第二个参数，分别对应过滤器的第二个和
第三个参数
指令和事件
指令（ Directives ）是 Vue 模板中最常用的一项功能，它带有前缀 v－，能帮我们
快速完成DOM操作。循环渲染。显示和隐藏
本节目标 v-text , v-html , v-bind , v-on
v-text:—————解析文本 和{{ }} 作用一样
v-html:————— 解析html
v-bind—————–vbind 的基本用途是动态更新 HTML 元素上的属性，比如 id 、
class 等,本节只介绍基本章节，后面章节会更加深入详细讲述
v-on——————它用来绑定事件监听器
v-on具体介绍
在普通元素上， v-on 可以监听原生的 DOM 事件，除了 click 外，还有
dblclick、 keyup, mousemove 等。表达式可以是一个方法名，这些方法都
写在 Vue 实例的 methods 属性内，并且是函数的形式，函数内的 this 指向
的是当前 Vue 实例本身，因此可以直接使用 this.xxx 的形式来访问或修改数
据
一个自己做的Demo:
<!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>demo</title>
<style>
.red {
background: red;
height: 18px;
}
</style>
</head>
<body>
//在页面中显示当前时间
<div id="app">
{{name}} <br>
<!--过滤器，| 后面接过滤器的名字-->
{{name | formatDate}}
<br>
<div v-html="html"></div>
<span v-text="weather"></span>
<br>
<div v-bind:class="className"></div>
<button v-on:click="click">{{countnum}}</button>
</div>
<script src="http://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var plusDate = function(value){
//在小于10的时候补0
return value < 10 ? '0' + value : value
}
var app = new Vue({
el : '#app',
data : {
name: new Date(),
html: '<div>你好</div>',
weather: 'sunny',
className: 'red',
countnum: 0
},
//定义过滤器
filters:{
//这里的value就是需要过滤的数据
formatDate: function(value) {
var date = new Date(value)
//将字符串转化为date类型
var year = date.getFullYear()
var month = plusDate(date.getMonth()+1)
var day = plusDate(date.getDate())
var hours = plusDate(date.getHours())
var min = plusDate(date.getMinutes())
var sec = plusDate(date.getSeconds())
//将整理的数据返回
return year + '--' + month + '--' + day + ' ' + hours + ':' + min + ':' + sec
}
},
mounted: function(){
var _this = this
this.timer = setInterval(function(){
_this.name = new Date()
},1000)
},
methods: {
click: function(){
this.countnum = this.countnum + 1
}
},
beforeDestroy: function(){
if(this.timer){
clearInterval(this.timer)}
}
})
</script>
</body>
</html>
语法糖
语法糖是指在不影响功能的情况下 ， 添加某种简洁方法实现同样的效果 ， 从而更加方便程
序开发。
v-bind ——> : (冒号)
v-on ——> @
网友评论