【Vue.js基础笔记】数据绑定，指令，事件

vue实例和数据绑定

1. <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
通过构造函数 Vue 就可以创建一个 Vue 的根实例，并启动 Vue 应用---入口

var app ＝new Vue({
  el:'',
  data:{
    }
})

2. 必不可少的一个选项就是 el 。 el 用于指定一个页面中己存在的 DOM 元素来挂载 Vue实例,可以是标签。也可以是css语法
3. 通过 Vue 实例的 data 选项，可以声明应用内需要双向绑定的数据。建议所有会用到的数据都预先在 data 内声明，这样不至于将数据散落在业务逻辑中，难以维护。也可以指向一个已经有的变量
4. 挂载成功后，我们可以通过
app.$el
来访问该元素。Vue 提供了很多常用的实例属性与方法，都以
el,app.
---访问data元素的属性-- 直接app.属性名，app.msg

生命周期钩子

jquery---$(document).ready()
* created 实例创建完成后调用，此阶段完成了数据的观测等，但尚未挂载， $el 还不可用。需要初始化处理一些数据时会比较有用，后面章节将有介绍．----还未挂载
* mounted el 挂载到实例上后调用，一般我们的第一个业务逻辑会在这里开始。相当于 $(document).ready()---刚刚挂载
*beforeDestroy 实例销毁之前调用。主要解绑一些使用 addEventListener 监听的事件等。

文本插值和表达式

语法：使用双大括号（ Mustache 语法）“｛｛｝｝”是最基本的文本插值方法，它会自动将我们双向绑定的数据实时显示出来，用法在｛｛｝｝中，除了简单的绑定属性值外，还可以使用 JavaScript 表达式进行简单的运算、三元运算等
---实例
Vue .js 只支持单个表达式，不支持语句和流控制。
{{ 6+6 *3}}---可以进行简单的运算 <br>
{{ 6<3 ? msg :a}}---可以用三元运算符 <br>
{{if(6>3){}}-----注意：文本插值的形式，其中不能书写表达式,支持单个表达式

过滤器

Vue. 支持在｛｛｝｝插值的尾部添加一小管道符 “ | ” 对数据进行过滤，经常用于格式化文本，比如字母全部大写、货币千位使用逗号分隔等。过滤的规则是自定义的，通过给 Vue 实例添加选项 filters 来设置过滤器：{{ data | filter1 |filter2}}
{{date | formatDate(66,99)}} 中的第一个和第二个参数，分别对应过滤器的第二个和第三个参数

指令和事件

指令（ Directives ）是 Vue 模板中最常用的一项功能，它带有前缀 v－，能帮我们快速完成DOM操作，循环渲染，显示和隐藏。
本节目标 v-text , v-html , v-bind , v-on
vtext:—————解析文本和{{ }} 作用一样
vhtml:————— 解析html
vbind—————–vbind 的基本用途是动态更新 HTML 元素上的属性，比如 id 、class 等,本节只介绍基本章节，后面章节会更加深入详细讲述
von——————它用来绑定事件监听器
von具体介绍
在普通元素上， von 可以监听原生的 DOM 事件，除了 click 外，还有dblclick、 keyup, mousemove 等。表达式可以是一个方法名，这些方法都写在 Vue 实例的 methods 属性内，并且是函数的形式，函数内的 this 指向的是当前 Vue 实例本身，因此可以直接使用 this.xxx 的形式来访问或修改数据
vue中用到的所有方法都定义在methods中
两个按钮，点击同时加数字？？？？思考

语法糖

语法糖是指在不影响功能的情况下，添加某种简洁方法实现同样的效果，从而更加方便程
序开发。
v-bind ——> : (冒号)
v-on ——> @