vue学习的最好材料：官方文档

知识点：

声明式渲染

1. vue应用所有东西都是响应式的。

直接在控制器中修改变量的值，能看到相对应的更新

问题：这样会不会不严谨，别有用心的人会不会直接找到变量然后修改数据？

绑定元素特性： 1. 文本插值 {{ message }} 2.绑定元素属性特性 v-bind:title=”message“

条件与循环

v-if="" v-for=""

1. 数据可以绑定在：文本，属性，dom结构。

2. Vue 强大的过滤效果在插入、更新、移除元素时自动应用过滤效果

处理用户输入

v-on :事件监听 --> v-on:click="function(){}" -->方法写到methods里面

v-model="变量" -->实现表单输入和应用状态之间的双向绑定 -->input里面value值的双向绑定

v-once -->只执行一次的插值，当数据改变时，插值处的内容不会更新。

注意：在方法中，我们更新应用状态，但没有触碰dom元素，所有的操作都有vue处理，编写的代码只需要关注逻辑层面就行。？？？

我的理解：我们在方法中，修改变量或者状态，并没有去触碰dom元素，所有的操作由vue处理。----vue怎么处理，就不清楚了（我的理解不一定对，欢迎更正！！！）

* 组件化应用构造（vue思想）

抽象，组件（小型，独立，可复用），大型应用使用多个组件构成。-->组件树

ARE YOU READY?

创建一个实例 --> 所有Vue组件都是Vue实例

var vm= new Vue({ 经常用vm表示Vue的实例

//选项

}）

选项列表：

数据与方法

值变化，视图也会变化（实例创建，data中的所用属性都加到Vue的响应式系统）。

// 我们的数据对象
var data = { a: 1 }

// 该对象被加入到一个 Vue 实例中
var vm = new Vue({
data: data
})

// 获得这个实例上的属性
// 返回源数据中对应的字段
vm.a == data.a // => true

// 设置属性也会影响到原始数据
vm.a = 2
data.a // => 2

// ……反之亦然
data.a = 3
vm.a // => 3

我的理解图例：

理解：当我们定义的数据发生改变时，Vue实例中创建的data数据也会发生改变，视图也会发生变化。

<div id="app"> {{message.a}} </div><script src="../js/vue.js"></script><script> var data={a:'hello'}; var vm=new Vue({ el:'#app', data:{ message:data } })</script>

-----------》》

//结果：hello

控制台编写：

data.a='vue'--》 "vue"

vm.message.a='hello vue' --》"hello vue"

Object.freeze( ) ，会阻止修改现有的属性，意味着响应系统无法再追踪变化。

Object.freeze( data ) ;视图将不会再根据我的 data.a赋值或实例赋值发生变化

要是属性刚开始不存在时？ --> 方法是在data中设置一些初始值，让它变为存在的空值

Vue实例中的属性和方法，都有前缀 $ , 以便用户定义的属性区分开。

vm.$el vm.$data

* 实例生命周期钩子

生命周期钩子中的 this --> 调用它的Vue实例

new Vue({

data:{

a:1

created : function(){ //不要在选项属性或回调上使用箭头函数，因为箭头函数是和父级上下文绑定在一起的，this不一定如你所预期的Vue实例。

// 可以用来在一个实例被创建后执行的代码。

}

})

* 生命周期图示（重要集中记住图片）

模板语法

基于html的模板语法，允许开发者声明式的将DOM绑定至底层Vue实例的数据 (我认为这句话得好好理解，这是响应式声明的原因)。在底层的实现上，Vue将template里面的标签字符串编译成虚拟的DOM函数，然后结合响应式系统，把template重新渲染，并把DOM操作次数减到最少。

理解：DOM树元素与底层Vue实例的数据进行绑定。

插值

1.数据绑定 {{ message }} {{ }} --> 双大括号会将数据解释为普通文本，非html代码

2. v-html --> 输出真正的Html代码

注意：不能用v-html来复合局部模板，因为 Vue不是基于字符串的模板引擎

组件更适合作为可重用和可组合的基本单位

绝不要对用户提供的内容使用插值

3. 使用javascript表达式

{{number + 1}} -->加减运算

{{ ok ? 'yes' : 'no' }} -->三目运算

{{ message.split(' ').reverse( ).join(' ' ) }} -->js方法运算

<div v-bind:id="'list-' + id"></div> --> 字符串的拼接

注意：每个绑定都只能包含单个表达式。只能访问全局变量的白名单例如：Math和Date ,不能访问用户定义的全局变量。

指令

单个JavaScript表达式（v-for是特例）

职责：当表达式的值发生改变时，将影响DOM元素

1. 参数

2. 修饰符

.prevent 修饰符是告诉 v-on 指令对于触发的事件调用 event.preventDefault( )

3. 缩写

v-bind:href=" " --> :href=" "

v-on:click=" " --> @click="

计算属性和侦听器

计算属性

computed:{

reverseMessage:function(){ ... }

}

getter函数：Vue实例中属性值的获取 vm.reverseMessage。getter函数是没有副作用的

计算属性缓存 vs 方法

1.可以将同一函数定义为一个方法而不是一个计算属性，两种方式之间的最终结果确实是完全相同的。

2. 不同：

计算属性是基于他们的依赖进行缓存的。只有在它的相关依赖关系发生改变时才会重新求职。

而方法总会再次执行函数。

计算属性缓存 vs 侦听属性（ watch ）

计算属性的setter

计算属性默认只有getter

在需要时，可以自己设置一个setter 。

侦听器

什么时候使用？--> 当数据变化时执行异步或开销较大的操作时。

用在组件上：

<my-component class="baz boo"></my-component>

<my-component v-bind:class="{ active: isActive }"></my-component>

绑定内联样式

v-bind:style 是一个js对象，属性名用驼峰式或者横杆

v-for

数组：

<p v-for="item of items"></p> 接近js迭代器

对象：

v-for和v-if一起被使用时，v-for的优先级更高

列表渲染

错题：

1.new Vue({ }); vue应该是大写开头，

报错：Uncaught ReferenceError: vue is not defined

2.new Vue({

el :" #app " #忘写了额，记住el里面填写的是选择器

})

3.犯了个傻错误，在methods方法中修改 data的值，忘记赋值。。。导致dom元素修改未成功

4. 创建一个组建

<ol>
    <todo-item></todo-item>
</ol>
<script src="../js/vue.js"></script>
<script>
    // 定义名为 todo-item 的新组件
    Vue.component('todo-item', {
        template: '<li>这是个待办项</li>'
    })
</script>

为什么页面上没有显示上？

答：组建是要配和Vue实例的。 var vm=new Vue() 不然不知道渲染哪个地方

vue入门，错题集