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文档流中解析不可见