这周还在完善好 好记性记账本，闲暇时间总结一下 Vue 。
Vue 小结
jquery 通过$() 选择器选择 dom 然后进行修改，最后把修改的数据渲染到视图上
vue 可以直接把事件绑定在 dom 上，在 dom 的回调里面修改数据模型，vue 会把数据渲染到视图上
vue 是怎样实现数据驱动的 采用了 mvvm 设计模式
mvvm
第一个 m 是 model 代表数据模型，在前端中 数据模型一般是一个纯的 js 对象
第二个 v 是 view， 代表的是视图，在前端中视图一般就代表 html 和 css
第二个 vm 是 viewmodel 是 model 和 view 的桥梁 ，其实就是一个 vue 实例
数据通过数据绑定映射到视图上，视图通过跟用户的交互比如点击事件通过 dom 的回调来改变数据
image.png
vue 的引用
- <script src="https://cdn.jsdelivr.net/npm/vue"></script>
- import vue from 'vue'
数据绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>stduy-vue</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div class="app">
{{ text }}
</div>
<script>
new Vue({ // 记得 V 要大写
// vue 实例的容器
el: '.app',
// 数据模型
data: {
text: 'hello wrold',
}
})
</script>
文本绑定
image.png
Vue 除了提供
{{}} 在 html 中绑定文本 还提供 v-text 和 v-html ， 在 vue 中 以 v- 开头的叫做指令，通过指令我们可以操作 dom ，注意 使用 v-html 容易引起 xss 攻击
<body>
<div class="app" >
<p>{{ text }}</p>
<p v-text="text"></p>
<p v-html="text"></p>
</div>
<script src="./app.js"></script>
</body>
app.js
new Vue({
// vue 实例的容器
el: '.app',
// 数据模型
data: {
text: '<b> hello wrold </b>',
}
})
image.png
属性绑定
v-bind 是绑定属性 后面接参数 中间用 :隔开，后面的参数就是要绑定的属性名可以简写:属性名="属性值"
<body>
<div class="app" >
<p>{{ text }}</p>
<p v-text="text"></p>
<p v-html="text"></p>
<a v-bind:href="url">qq</a> // 可以简写 :href="url"
</div>
<script src="./app.js"></script>
</body>
app.js
new Vue({
// vue 实例的容器
el: '.app',
// 数据模型
data: {
text: '<b> hello wrold </b>',
url:'https:www.qq.com'
}
})
v-model
实现表单输入和应用状态之间的双向绑定
<div id="app-6">
<p>{{ message }}</p>
<input v-model="message">
</div>
var app6 = new Vue({
el: '#app-6',
data: {
message: 'Hello Vue!'
}
})
网友评论