vue 第二天

2019-02-19  本文已影响0人  皇甫贝

1.声明式渲染

-{{ }}表达式,里面的属性会被解析
-new Vue(参数对象)
-参数对象
-el:用选择器指定页面中的一个元素被Vue所管理,也可以理解成JS作用域的概念,用ID绑定,在这个元素点击事件中声明变量 这个变量只能在这个点击事件函数中执行解析,在外面就会报错
-data,Vue实例的数据对象。里面的属性里面的值都是响应式的
-methods存放所有的操作事件
-filters存放所有的过滤器
-computed:存放所有的计算属性也是一个函数。(计算属性值会缓存)
-watchers: 监听值改变之后触发watchers属性

指令

-V-bind:属性被称为指令。指令带有前缀v-,以表示它们是 Vue 提供的特殊属性。可能你已经猜到了,它们会在渲染的 DOM 上应用特殊的响应式行为。简言之,这里该指令的作用是:“将这个元素节点的 title 属性和 Vue 实例的 message 属性保持一致”
-V-if :判断
-V-else:
-V-else-if:
-V-show:和v-if一样的功能 他们的区别是v-show相当于display:none,但是不能操作template对象标签
-V-for :循环 可以迭代数组 对象 整数()
-V-on :绑定事件
-V-model:数据双向绑定、
-V-once:一次性绑定使用
-V-html:解析带有html标签的字符串

实例

-每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的根实例 启动的
-在实例化 Vue 时,需要传入一个选项对象,它可以包含数据、模板、挂载元素、方法、生命周期钩子等选项
-每个 Vue 实例都会代理其 data 对象里所有的属性
-只有这些被代理的属性是响应的。如果在实例创建之后添加新的属性到实例上,它不会触发视图更新。
-声明周期钩子:
每个 Vue 实例在被创建之前都要经过一系列的初始化过程。这就给我们提供了执行自定义逻辑的机会。

模板语法

-{{ }}

修饰符

-prevent修饰符,告诉V-on指令调用时调用。阻止事件冒泡,V-on:click.prevent="hfgb()"
-过滤器 {{2*3 | hfgb}}管道符

-缩写方式

-V-bind:href ->:href
-V-on:click ->@click=" "

计算属性

-值会缓存
class 和 style绑定
-数据绑定一个常见需求是操作元素的 class 列表和它的内联样式。因为它们都是属性 ,我们可以用v-bind 处理它们:只需要计算出表达式最终的字符串。
-数组
-对象

列表渲染

小结:

-Vue实例的data属性:存放所有的可响应式的数据
-Vue实例中的methods属性(或者方法),存放所有的操作事件
-template标签在html文档流中解析不可见

上一篇 下一篇

猜你喜欢

热点阅读