对于学习 Vue 知识来说，我的认知就是， Vue 初级教程分为 组件教程和非组件教程（基础知识）。其中基础知识实际上话很少事件求能了解（不需要记住）
Vue 的教程无需购买其他书籍，官方的教程就很全有视频教程。官方教程.
基础教程包括了
1. 数据与方法
2. 生命周期
3. 模板语法
4. 计算属性和侦听器
5. Class 与 Style
6. 条件渲染
7. 列表渲染
9. 表单输入绑定
10. 组件基础
1 数据与方法
这里的数据与方法，就是指 Vue 在 Script 标签中如何使用数据和方法。这里的数据方法跟我们使用 Jquery 的时候差别不大。
<script>
var vue=new Vue({
el:"#app",
data:{
key:value,
key2:value2
},
methods:{
funname:function(){
//do something
}
}
})
</script>
其中 数据 data 可以在外部下定义
<script>
var data = {
key:value,
key2:value2
}
var vue=new Vue({
el:"#app",
data:data,
methods:{
funname:function(){
//do something
}
}
})
</script>
也可以在外部定义数据
<script>
var vue=new Vue({
el:"#app",
data:{
key:value,
key2:value2
},
methods:{
funname:function(){
//do something
}
}
})
vue.$data=data
</script>
2 生命周期与生命钩子方法
<script>
export default {
data: function() {
return { message: "msg" };
},
beforeCreate: function() {
console.group("beforeCreate 创建前状态===============》");
console.log("%c%s", "color:red", "el : " + this.$el); //undefined
console.log("%c%s", "color:red", "data : " + this.$data); //undefined
console.log("%c%s", "color:red", "message: " + this.message);
},
created: function() {
console.group("created 创建完毕状态===============》");
console.log("%c%s", "color:red", "el : " + this.$el); //undefined
console.log("%c%s", "color:red", "data : " + this.$data); //已被初始化
console.log("%c%s", "color:red", "message: " + this.message); //已被初始化
},
beforeMount: function() {
console.group("beforeMount 挂载前状态===============》");
console.log("%c%s", "color:red", "el : " + this.$el); //已被初始化
console.log(this.$el);
console.log("%c%s", "color:red", "data : " + this.$data); //已被初始化
console.log("%c%s", "color:red", "message: " + this.message); //已被初始化
},
mounted: function() {
console.group("mounted 挂载结束状态===============》");
console.log("%c%s", "color:red", "el : " + this.$el); //已被初始化
console.log(this.$el);
console.log("%c%s", "color:red", "data : " + this.$data); //已被初始化
console.log("%c%s", "color:red", "message: " + this.message); //已被初始化
},
beforeUpdate: function() {
console.group("beforeUpdate 更新前状态===============》");
console.log("%c%s", "color:red", "el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red", "data : " + this.$data);
console.log("%c%s", "color:red", "message: " + this.message);
},
updated: function() {
console.group("updated 更新完成状态===============》");
console.log("%c%s", "color:red", "el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red", "data : " + this.$data);
console.log("%c%s", "color:red", "message: " + this.message);
},
beforeDestroy: function() {
console.group("beforeDestroy 销毁前状态===============》");
console.log("%c%s", "color:red", "el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red", "data : " + this.$data);
console.log("%c%s", "color:red", "message: " + this.message);
},
destroyed: function() {
console.group("destroyed 销毁完成状态===============》");
console.log("%c%s", "color:red", "el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red", "data : " + this.$data);
console.log("%c%s", "color:red", "message: " + this.message);
}
};
</script>
执行后,如下图
如果使用了 amount(“#app”)表示通过挂载的方式载入，那么只有当 mounted 的时候 el 才会有对象
3 模板语法
Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。
在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。
3.1 文本
<span>Message: {{ msg }}</span>
3.2 显示html
<span v-html="rawHtml"></span>
3.3 特性
我们不能再 HTML 标签上直接写 {{}} Mustache 语法，这个时候，我们需要用到 v-bind 指令
<div v-bind:id="dynamicId"></div>
3.4 javascript
迄今为止，在我们的模板中，我们一直都只绑定简单的属性键值。但实际上，对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持。
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>
3.5 指令
指令 (Directives) 是带有 v- 前缀的特殊特性。指令特性的值预期是单个 JavaScript 表达式 (v-for 是例外情况，稍后我们再讨论)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。回顾我们在介绍中看到的例子：
<p v-if="seen">现在你看到我了</p>
3.6 指令+参数
v-bind 指令可以加参数，例如在这里 href 是参数，告知 v-bind 指令将该元素的 href 特性与表达式 url 的值绑定。
<a v-bind:href="url">...</a>
另一个例子是 v-on 指令，它用于监听 DOM 事件
<a v-on:click="doSomething">...</a>
3.7 动态参数
从 2.6.0 开始，可以用方括号括起来的 JavaScript 表达式作为一个指令的参数：
<!--
注意，参数表达式的写法存在一些约束，如之后的“对动态参数表达式的约束”章节所述。
-->
<a v-bind:[attributeName]="url"> ... </a>
这里的 attributeName 会被作为一个 JavaScript 表达式进行动态求值，求得的值将会作为最终的参数来使用。例如，如果你的 Vue 实例有一个 data 属性 attributeName，其值为 “href”，那么这个绑定将等价于 v-bind:href。
<a v-on:[eventName]="doSomething"> ... </a>
在这个示例中，当 eventName 的值为 “focus” 时，v-on:[eventName] 将等价于 v-on:focus。
4 计算属性和侦听器
模板内支撑表达式
<div id="example">
{{ message.split('').reverse().join('') }}
</div>
在这个地方，模板不再是简单的声明式逻辑。你必须看一段时间才能意识到，这里是想要显示变量 message 的翻转字符串。当你想要在模板中多次引用此处的翻转字符串时，就会更加难以处理。
4.1 计算属性
计算使用 computed 方法，计算是指根据现有的变量计算出第三个变量的变化。
<template>
<div class="about" id="about">
<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
</div>
</template>
<script>
export default {
data: function() {
return { message: "msg" };
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
};
</script>
以上示例我们统一可以编写一个方法实现
<template>
<div class="about" id="about">
<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
</div>
</template>
<script>
export default {
data: function() {
return { message: "msg" };
},
methods: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
};
</script>
不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。
例如：
“`html
computed: {
now: function () {
return Date.now()
}
}
““
4.2 侦听器
侦听使用 watch 方法，侦听一般用于一个变量的变化促使其他变量的变化
Class 与 Style
条件渲染
列表渲染
组件基础
转载请注明：程序鱼 » Vue 2.x 基础知识