1 什么是Vue
1.1 概念
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式的JavaScript框架。
它的作者尤雨溪，于2015年发布1.0.0版本，2016年4月发布2.0版本，2020年9月发布3.0版本
1.2 特点
Vue是一个遵循MVVM模式的渐进式框架
Vue比较易学，体积更小，灵活，高效
Vue的本身只关注UI视图，可以更简单的导入Vue插件和第三方库
Vue通过Vue对象把数据和视图完全分离开来，对视图的改变无需在操作DOM元素，只需要操作对
应的数据，即可改变对应的视图结构，也就是通过双向数据绑定把View层和Model层连接了起
来，通过对数据的操作就可以完成对页面视图的渲染
2 数据渲染
2.1 vue.js引入
<script src="" target="_blank">https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
2.2 数据绑定
<!-- 视图层 -->
<div id="app">
{{ msg }}
</div>
2.3 Vue语法
data：所有要展示的数据都要放在data属性中
el：指定了元素的挂载点
// 1. 创建一个Vue实例
const vm = new Vue({
el: "#app", // 指定了数据所要渲染的视图
// 数据层
data: {
msg: "hello world"
}
});
3 指令
Vue中的指令是一个特殊的HTML标签属性，以 v- 开头，它可以绑定一个表达式，并且把一些特性
作用到DOM结构上去
可以把Vue中的指令理解为是对HMTL标签属性的扩展
3.1 v-cloak
作用：防止页面加载时出现闪烁的问题
<html>
<style type="text/css">
/*
1、通过属性选择器 选择到 带有属性 v-cloak的标签 让他隐藏
*/
[v-cloak]{
/* 元素隐藏 */
display: none;
}
</style>
<body>
<div id="app">
<!-- 2、 让带有插值语法的添加 v-cloak 属性，在数据渲染完成之后，v-cloak 属性会被自动去
除，
v-cloak一旦移除也就是没有这个属性了，属性选择器就选择不到该标签也就是对应的标签会变
为可见
-->
<div v-cloak >{{msg}}</div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
// el 指定元素 id 是 app 的元素
el: '#app',
// data 里面存储的是数据
3.2 v-text
v-text指令用于将数据填充到标签中，作用于插值表达式类似，但是没有闪动问题
v-text指令不解析HTML标签
注意：此处为单向绑定，数据对象上的值改变，插值会发生变化；但是当插值发生变化并不会影响
数据对象的值
<div id="app">
<!--
注意:在指令中不要写插值语法 直接写对应的变量名称;在 v-text中赋值的时候不要在写插值语法
在属性中不加 {{}} 直接写对应的数据名
-->
<p v-text="msg"></p>
<p>
<!-- Vue 中只有在标签的 内容中 才用插值语法 -->
{{msg}}
</p>
</div>
<script>
new Vue({
el: '#app',
data: {
msg: 'Hello Vue.js'
}
});
</script>
3.3 v-html
用法和v-text 相似 但是他可以将HTML片段填充到标签中
可能有安全问题, 一般只在可信任内容上使用 v-html ，永不用在用户提交的内容上
它与v-text区别在于v-text输出的是纯文本，浏览器不会对其再进行html解析，但v-html会将其当
html标签解析后输出。
<div id="app">
<p v-html="html"></p> <!-- 输出：html标签在渲染的时候被解析 -->
<p>{{message}}</p> <!-- 输出：<span>通过双括号绑定</span> -->
<p v-text="text"></p> <!-- 输出：<span>html标签在渲染的时候被源码输出</span> -->
</div>
<script>
let app = new Vue({
el: "#app",
data: {
message: "<span>通过双括号绑定</span>",
html: "<span>html标签在渲染的时候被解析</span>",
3.4 v-pre
显示原始信息跳过编译过程
跳过这个元素和它的子元素的编译过程。
一些静态的内容不需要编译加这个指令可以加快渲染
<div id="app">
<span v-pre>{{ this will not be compiled }}</span>
<!-- 显示的是{{ this will not be compiled }} -->
<span v-pre>{{msg}}</span>
<!-- 即使data里面定义了msg这里仍然是显示的{{msg}} -->
</div>
<script>
new Vue({
el: '#app',
data: {
msg: 'Hello Vue.js'
}
});
</script>
3.5 v-once
执行一次性的插值【当数据改变时，插值处的内容不会继续更新】
<div id="app">
<!-- 即使data里面定义了msg 后期我们修改了 仍然显示的是第一次data里面存储的数据即 Hello
Vue.js -->
<span v-once>{{ msg}}</span>
</div>
<script>
new Vue({
el: '#app',
data: {
msg: 'Hello Vue.js'
}
});
</script>
3.6 v-on
v-on这个指令是用来绑定事件的,可以简写成@
<div id="app">
<!-- 绑定点击事件数量进行自增或者自减 -->
<button v-on:click="num++">自增</button>
<!-- 简写 -->
<button @click="num--">自减</button>
<p>数量:{{ num }}</p>
3.7 v-show
v-show用来控制元素的显示与隐藏，如果值为true，元素显示；值为false，元素隐藏
<div id="app">
<div v-show="true">我是div元素</div>
</div>
<script>
const vm = new Vue({
el: "#app"
})
</script>
4 双向数据绑定
4.1 v-model指令
v-model实现数据和视图的双向绑定，即数据变了，视图会更新；视图更新了，数据会改变
注意：v-model指令只能用在表单元素上
<div id="app">
<input type="text" v-model="msg" />
<div>{{ msg }}</div>
</div>
<script>
const vm = new Vue({
el: "#app",
data: {
msg: "hello world2"
}
})
</script>
5 Vue中的事件
5.1 事件的基本用法
vue中使用v-on指令来绑定事件，可以简写成@
在vue中所有的方法（函数）都要写在 methods 属性中
</div>
<script>
new Vue({
el: "#app",
data:{
num:1
}
})
</script>
5.2 事件函数传参
1. 传参
<div id="app">
<button @click="fn(3, 4)">点击</button>
</div>
<script>
const vm = new Vue({
el: "#app",
methods: {
fn(a, b) {
alert(a+b)
}
}
})
</script>
2. 事件对象
如果不传参数，事件处理函数的第一个参数就是事件对象
<div id="app">
<button @click="fn">点击</button>
</div>
<script>
const vm = new Vue({
el: "#app",
methods: {
fn(ev) { // 事件处理函数
// ev: 事件对象
console.log(ev)
}
}
})
</script>
如果传递参数，事件处理函数的最后一个参数就是事件对象，需要使用$event来接收
<div id="app">
<button @click="fn(3, 4, $event)">点击</button>
</div>
<script>
const vm = new Vue({
el: "#app",
methods: {
fn(a, b, ev) {
console.log(a, b, ev)
}
}
})
</script>
962
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
