一、基础
特点
- 更加轻量 20KB min+ gzip
- 渐进式框架
- 响应式的更新机制
- 学习成本低
内容
- 基础篇
- 核心知识
- 生态篇
- 大型项目 需要的周边技术
- 实战篇
- 开发基于VUE的Ant design pro
- vue 3.0
声明式渲染
- 通过 v-bind:id或者--:id 绑定动态值
<div id="app">
{{message}} {{message+message}}
<!-- 通过 v-bind:id或者--:id 直接动态的引入变量 !-->
<div v-bind:id="message"></div>
<div :id="message"></div>
</div>
<!--引入js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
el:"#app",
data: {
message: "hello world!"
}
})
</script>
条件与循环
- 使用几个指令 v-if v-else v-for 展示效果
<div id="app">
<ul>
<li v-for="item in list">
<span v-if="!item.del"> {{item.title}} </span>
<span v-else style="text-decoration: line-through"> {{item.title}} </span>
<button v-show="!item.del">删除</button>
</li>
</ul>
</div>
<!--引入js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
el:"#app",
data: {
list: [
{title: "课程1", del: false},
{title: "课程2", del: true}],
}
})
</script>
总结
- 插值方法 {{}}
- 指令 通过 v-bind:id或者--:id 绑定动态值
- 指令 v-if v-else v-for
组件化应用构建
基本套路定义一个组件 即通过 Vue.component定义一个实例 然后定义一个app将原始数据和实例进行耦合 然后创建Vue实例
Vue实例要求具备：
- name部分 定义名称
- props部分 定义好都有哪些属性 以便后面的模版进行调用
- template部分 渲染的模版
这块有点和jinja2类似 都是定义好模版 然后在模版中加入一些数据、变量的处理逻辑
demo
<div id="app-2">
<ol>
<todo-item
<!v-bind:xxx 定义变量-->
v-for="item in groceryList"
v-bind:todo="item"
v-bind:key="item.id"
v-bind:name="item.text">
</todo-item>
</ol>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.component('todo-item', {
<!props定义有哪些属性属性 需要和创建todo-item实例的时候进行耦合 -->
props:['todo', 'key', 'name'],
template: '<li> {{key}} + {{name}} </li>'
}
)
var app2 = new Vue({
el: "#app-2",
data:{groceryList: [
{ id: 0, text: '蔬菜' },
{ id: 1, text: '奶酪' },
{ id: 2, text: '随便其它什么人吃的东西' }
]
}
})
</script>
渲染示例
二、Vue实例
创建实例
// 创建一个数据对象
var result = { a: 1 , age: 18, name: "wangfei" }
// 将对象result 加入到一个 Vue实例中
var vm = new Vue({
data: result
})
// 获得这个实例上的 property
// 返回源数据中对应的字段
vm.a == data.a // => true
// 设置 property 也会影响到原始数据
vm.a = 2
data.a // => 2
// ……反之亦然
data.a = 3
vm.a // => 3
注意 如果不想让实例的属性被修改 可以使用 Object.freeze()，这会阻止修改现有的 property
var obj = {
foo: 'bar'
}
Object.freeze(obj)
var vm2 = new Vue({
el: '#app',
data: obj
})
vm2.foo = "123"
实例生命周期钩子
-
每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。
-
同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。
-
钩子函数有：
- created 钩子可以用来在一个实例被创建之后执行代码
- mounted
- updated
- destroyed
生命周期图示
三、模版语法
- Vue.js 使用了基于 HTML 的模板语法
- 允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据
- 在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。
- 结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。
1.展示文本类型
使用“Mustache”语法 (双大括号) {{}} 的文本插值
<span>Message: {{ msg }}</span>
通过使用 v-once 指令 执行一次性地插值，当数据改变时，插值处的内容不会更新。
<span v-once>这个将不会改变: {{ msg }}</span>
2.展示 原始HTML 类型
双大括号 {{}} 会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，需要使用 v-html 指令
有点类似jinja2中的拦截器 比如 ｜safe
注意：你的站点上动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值，绝不要对用户提供的内容使用插值。
demo
<div id="app2">
<span>普通文本：{{name}}</span>
<br> 原始HTML
<span v-html="name"> </span>
</div>
<!--引入vue js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app2 = new Vue({
el: "#app2",
data: {name: '<b>this is a test!</b>'}
})
</script>
示例
3.属性（Attribute）
Mustache 语法不能作用在 HTML attribute 上，应该使用 v-bind 指令 绑定变量
<div v-bind:id="dynamicId"></div>
demo
<div id="app2">
<div v-bind:id="dynamicId"></div>
<button v-bind:disabled="isButtonDisabled">Button</button>
</div>
<!--引入vue js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app2 = new Vue({
el: "#app2",
data: {
dynamicId: "123",
isButtonDisabled: false
}
})
</script>
如果 isButtonDisabled 的值是 null、undefined 或 false，则 disabled attribute 甚至不会被包含在渲染出来的<button>元素中
