11_03_第六阶段：大前端进阶||07-Vue详解||P4：第一个Vue程序 && P5：Vue基本语法【观看狂神随笔】
原创
©著作权归作者所有：来自51CTO博客作者狂野小白兔的原创作品，请联系作者获取转载授权，否则将追究法律责任
1. 什么是MVVM
2. 为什么要使用MVVM
3. MVVM的组成部分
4. Vue
Vue的核心就是实现了DOM监听与数据绑定
5. 第一个Vue程序
开发版本
- 包含完整的警告和调试模式：https://vuejs.org/js/vue.js
- 删除了警告，30.96KB min + gzip：https://vuejs.org/js/vue.min.js
在线CDN导入：
-
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>【完整版】 -
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>【压缩版】
第一个Vue程序的流程：
1、创建一个 HTML 文件
2、页面中导入Vue.js【习惯导入到最下面】
EL表达式是一种在JSP页面获取数据的简单方式(只能获取数据，不能设置数据)3、创建一个 Vue 的实例
<script type="text/javascript">
var vm = new Vue({
<!--1.绑定标签：EL表达式通过id选择器把app选中-->
el: "#app",
<!--2.数据绑定-->
data: {
message: "hello, vue!"
}
});
</script>
4、将数据绑定到页面元素
{{}}说明：只需要在绑定的元素中使用 双花括号 将 Vue 创建的名为 message 属性包裹起来，即可实现数据绑定功能，也就实现了 ViewModel 层所需的效果，是不是和 EL 表达式非常像？ 完整的 HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--view层 变成了模板-->
<div id="app">
<!--拿数据-->
{{message}}
</div>
<!--导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript">
var vm = new Vue({
<!--1.绑定标签：EL表达式通过id选择器把app选中-->
el: "#app",
<!--2.数据绑定-->
data: {
message: "hello, vue!"
}
});
</script>
</body>
</html>
6. v-bind
体验代码：
<div id="app">
<span v-bind:title="message">
鼠标悬停几秒钟查看此处动态绑定的提示信息！
</span>
</div>
7. v-if，v-else
例子1
<div id="app">
<h2 v-if="ok">Yes</h2>
<h2 v-else>No</h2>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
//viewModel 实现与Model双向绑定，动态更新视图
var vm = new Vue({
el:"#app",
// model ：数据
data:{
ok: true
}
});
</script>
例子2
<div id="app">
<h1 v-if="type === 'A'">A</h1>
<h1 v-else-if="type === 'B'">B</h1>
<h1 v-else-if="type === 'C'">C</h1>
<h1 v-else>D</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
type: 'A'
/*message: "hello, world"*/
}
});
</script>
=== 的含义：如果两个值的类型不同，直接返回false。
8. v-for
<div id="vue">
<li v-for="item in items">
{{ item.message }}
</li>
</div>
- 注：items 是数组，item是数组元素迭代的别名。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
</head>
<body>
<div id="app">
<li v-for="item in items">
{{item.message}}
</li>
</div>
<script type="text/javascript">
var demo = new Vue({
el: '#app',
data: {
items: [
{"message": "韦恩公司1"},
{"message": "韦恩公司2"}
]
}
})
</script>
</body>
</html>
9. v-html
v-html：将字符串转换成html标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue学习</title>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{message}}</p>
<p>{{msg}}</p>
<!-- 将一个文本字符串转化为HTML标签的形式 -->
<p v-html="msg"></p>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
msg: "<h1>这是一个h1元素内容</h1>",
message: "hello"
}
});
</script>
</body>
</html>
