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

vue

vue实例和数据绑定

1. <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/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
v­text:—————­解析文本 和{{ }} 作用一样
v­html:————— 解析html
v­bind—————–v­bind 的基本用途是动态更新 HTML 元素上的属性,比如 id 、class 等,本节只介绍基本章节,后面章节会更加深入详细讲述
v­on——————它用来绑定事件监听器
v­on具体介绍
在普通元素上, v­on 可以监听原生的 DOM 事件,除了 click 外,还有dblclick、 keyup, mousemove 等。表达式可以是一个方法名,这些方法都写在 Vue 实例的 methods 属性内,并且是函数的形式,函数内的 this 指向的是当前 Vue 实例本身,因此可以直接使用 this.xxx 的形式来访问或修改数据
vue中用到的所有方法都定义在methods中
两个按钮,点击同时加数字????思考


语法糖


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

以上是 【Vue.js基础笔记】数据绑定,指令,事件 的全部内容, 来源链接: utcz.com/z/378612.html

回到顶部