1 概述
1.1 MVVM模型
image.png
Model-View-ViewModel 的缩写，它是一种软件架构风格
Model 模型 数据对象（data选项）
View 视图 模板页面（用于渲染数据）
ViewModel 视图模型 其实本质上就是Vue实例
通过数据驱动视图
把需要改变视图的数据初始化到 Vue中
再通过修改 Vue 中的数据
从而实现对视图的更新
声明式编程
按照Vue特定语法进行声明开发就可以实现功能，不需要我们直接操作Dom元素
命令式编程
Jquery它就是需要手动去操作Dom才能实现对应功能
2 要点
2.1 HelloWorld
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- {{}} 用于标签体内显示数据 可以写表达式 如加减乘除 -->
Hello, {{ msg }}
<br/>
<!-- v-model 进行数据双向绑定 -->
<input type="text" v-model="msg">
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
new Vue({
// el指定被Vue管理的入口 不可以指定body和html
el: '#app',
// data初始化数据 可在被vue管理的节点下使用
data: {
msg: 'Vue.js'
},
})
</script>
</body>
</html>
2.2 v-once
通过使用 v-once 指令，执行一次性地插值，当数据改变时插值处的内容不会更新
2.3 v-html
如果是HTML格式数据，双大括号会将数据解释为普通文本。
输出真正的 HTML需要使用 v-html指令。
Vue 为了防止 XSS 攻击在此指令上做了安全处理，当发现输出内容有 script 标签时，则不渲染。XSS 攻击主要利用 JS 脚本注入到网页中，读取 Cookie 值（Cookie一般存储了登录身份信息），读取到了发送到黑客服务器，从而黑客可以使用你的帐户做非法操作。XSS 攻击还可以在你进入到支付时，跳转到钓鱼网站。
2.4 v-bind
<!-- 红色字体是正常的 -->
<img v-bind:src="imgUrl" alt="VueLogo">
<!-- 缩写 -->
<img :src="imgUrl" alt="VueLogo">
2.5 v-on
<body>
<div id="app">
<h2>1. 事件处理方法</h2>
<button @click="say">Say {{msg}}</button>
<!-- 多个参数将$event作为实参传入DOM原生事件 -->
<button @click="warn('hello', $event)">Warn</button>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
msg: 'Hello, Vue.js'
},
methods: {
// 单个参数默认传入DOM原生事件
say: function (event) {
alert(this.msg)
alert(event.target.innerHTML)
},
// 多个参数将$event作为实参传入DOM原生事件
warn: function (msg, event) {
alert(msg + "," + event.target.tagName)
}
}
})
</script>
</body>
2.6 v-if
v-if 是否渲染当前元素 v-else v-else-if
v-show 与 v-if 类似，但始终会被渲染，通过切换元素的display属性控制显示/隐藏
- 什么时候元素被渲染
v-if 如果在初始条件为假，则什么也不做，每当条件为真时，都会重新渲染条件元素
v-show 不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换 - 使用场景选择
v-if 有更高的切换开销，v-show 有更高的初始渲染开销
频繁地切换使用 v-show 较好；如果在运行后条件很少改变则使用 v-if 较好
<body>
<style>
.box {
width: 200px;
height: 200px;
background: red;
}
</style>
<div id="app">
<h2>v-if 条件渲染</h2> <input v-model="seen" type="checkbox">勾选后显示红色小块
<!-- v-if 为 true则显示渲染当前元素, -->
<div v-if="seen" class="box"></div>
<p v-else>红块已隐藏</p>
<h2>v-show 条件渲染</h2> <!-- v-show 的元素始终会被渲染并保留在 DOM 中,只是简单切换元素的 CSS 属性 display 显示隐藏,而不是重新加载div-->
<div v-show="seen" class="box"></div>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
seen: false
}
})
</script>
</body>
2.7 v-for
// 迭代数组
<div v-for="item in items" :key="item.id"></div>
<div v-for="(item, index) in items" :key="item.id"></div>
// 迭代对象的属性
<div v-for="value in object" ></div>
<div v-for="(value, key) in object"></div>
<div v-for="(value, key, index) in object"></div>
<body>
<div id="app">
<h2>1. 迭代数组</h2>
<ul>
<!-- e 为当前对象别名，index 数组下标0开始-->
<li v-for="(e, index) of emps" :key="index">
编号：{{index+1}}，姓名：{{e.name}}，工资：{{e.salary}}
</li>
</ul> <br>
<h2>2. 迭代对象</h2>
<ul>
<!-- value是属性值，key是属性名，index索引值-->
<li v-for="(value, key, index) in emps[0]">
第{{index+1}}个属性为：{{key}} = {{value}}
</li>
</ul>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
emps: [
{ name: '马云', salary: '20000' },
{ name: '马化腾', salary: '18000' },
{ name: '刘强东', salary: '13000' }
]
}
})
</script>
</body>
2.8 v-pre
可以用来显示原始插入值标签 {{}}
也可以让标签不需要vue的管理，加快编译速度
<span v-pre>{{Hello World}}</span>
2.9 v-text
等价于 {{}} 用于显示内容，但区别在于{{}} 会造成闪烁问题， v-text 不会闪烁
2.10 v-cloak
默认一开始被 Vue 管理的模板是隐藏着的
当 Vue 解析处理完 DOM 模板之后会自动把这个样式去除
然后就显示出来
<html lang="en">
<head>
<meta charset="UTF-8">
<title>指令</title>
<style>
/*将带有 v-clock 属性的标签隐藏*/
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<!-- 在被 Vue 管理的模板入口节点上作用 v-cloak 指令-->
<div id="app" v-cloak>
<!--
用QQ浏览器刷新页面时, {{}} 会有明显闪烁现象
浏览器从上往下依次解析, 会先把 {{ message }} 当作标签体直接先渲染
然后 Vue 再进行解析 {{ message }} 变成了 message 的值: 'hello mengxuegu'
-->
<h3>{{ message }}</h3>
<h3>{{ message }}</h3>
<h3 v-text="message"></h3>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
message: 'hello mengxuegu'
}
})
</script>
</body>
</html>
网友评论