1.对Vue的初步认识
Vue是一种用于构建用户界面的渐进式JavaScript框架（其他框架还有ANGULAR、REACT等），它能够帮助开发者创建可维护性和可测试性更强的代码库。“渐进式”的意思是指，若你已有一个现成的服务端应用，那么你可将vue作为该应用的一部分嵌入其中，带来更加丰的交互体验；或者如果你希望将更多业务逻辑放到前端来实现，那么vue的核心库及其生态系统也可满足你的各式需求。和其他前端框架一样，vue允许你将一个网页分割成可服用的组件，每个组件都包含属于自己的html、css、JavaScript以用来渲染网页中相应的地方。
1.1 Vue的安装参见以下链接
https://blog.csdn.net/m0_37479246/article/details/78836686
2.HTML、CSS、JavaScript三者之间的关系
html是框架，相当于房子的顶梁柱；css是刷墙的颜料，负责美化html；JavaScript是让html更生动好看，如让网页中的图片滚动显示。另外，平时常说的Dreamwea是一种编辑网页的工具。div和frame是html众多元素中的两个，前者负责布局，后者负责整体框架。
3.每个vue应用都需通过实例化vue来实现。语法格式如下：
var vm = new Vue({
//选项
})
4.DOM
全称document object model，文档对象模型，是用于访问html元素的正式W3C标准。
5.vue对象包含的属性：
new Vue({
//绑定元素
el:'#app',
//要绑定的数据
data:{},
//用来接受外部资料的属性
props:{},
// 用来定义在Vue内使用的方法
methods:{},
//用来观察Vue 数据的更新
watch:{},
//自动为内部数据计算的属性
computed:{},
// 提供Vue 实体编译后的样板
template:{},
//用来定义子元件
components:{}
});
6.一个测试实例
<!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>Document</title>
<script src="../vue.js"></script> <!--注：vue.js须和本html文件在同一文件夹中才能用这种写法-->
</head>
<body>
<div id="app">
<p v-bind:title="title">
{{msg}}
</p>
</div>
<script>
var app=new Vue({ //var app=可省略，但在浏览器开发者模式下，app.msg的值无法被修改
el: '#app',
data: {
msg: "你好！",//页面显示“
title:'页面加载于 '+new Date().toLocaleString()
}
})
</script>
</body>
</html>
jsdfdfjasjf
该实例的运行结果是在浏览器页面显示“你好！”，并且当鼠标指针指向该文本时，显示页面加载时间。
7.Vue.js模板语法
Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。
Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。
结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。
(1)文本：使用{{...}}进行数据绑定，文本插值就属于这种形式
<div id="app">
<p>{{ message }}</p>
</div>
(2)html：使用v-html指令输出html代码
<div id="app">
<div v-html="message"></div>
</div>
<script>
new Vue({
el: '#app',
data: {
message: '<h1>菜鸟教程</h1>'
}
})
</script>
html属性的值：使用v-bind指令绑定html属性中的值。下面的实例先判断class1的值，若为true则使用class1类的样式，否则不使用该类：
<div id="app">
<label for="r1">修改颜色</label><input type="checkbox" v-model="use" id="r1">
<br><br>
<div v-bind:class="{'class1': use}">
v-bind:class 指令
</div>
</div>
<script>
new Vue({
el: '#app',
data:{
use: false
}
});
</script>
(3)Vue支持JS表达式
<div id="app">
{{5+5}}<br>
{{ ok ? 'YES' : 'NO' }}<br>
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id">菜鸟教程</div>
</div>
<script>
new Vue({
el: '#app',
data: {
ok: true,
message: 'RUNOOB',
id : 1
}
})
</script>
(4)指令：是带有v-前缀的特殊属性。用于在表达式的值改变时，将某些行为应用到DOM上。例：
<div id="app">
<p v-if="seen">现在你看到我了</p>
</div>
<script>
new Vue({
el: '#app',
data: {
seen: true
}
})
</script>
这里，v-if指令将根据表达式seen的值（true或false)来决定是否插入p元素。
(5)参数：在指令后以冒号指明。如下例中，v-bind指令被用来响应地更新HTML属性：
<div id="app">
<pre><a v-bind:href="url">菜鸟教程</a></pre>
</div>
<script>
new Vue({
el: '#app',
data: {
url: 'http://www.runoob.com'
}
})
</script>
这里，href是参数，告知v-bind指令将该元素的href属性与表达式url的值绑定。
下面这个例子中的v-on指令，用于监听DOM事件：
<a v-on:click="doSomething">
在这里，参数是监听的事件名。
(6)修饰符 ：以英文句号.指明的特殊后缀，用于指出一个指令应该以特殊的方式绑定。如，.prevent修饰符告诉v-on指令对于触发的事件调用event.preventDefault();
<form v-on:submit.prevent="onSubmit"></form>
(7)用户输入：在input输入框中可使用v-model指令来实现双向数据绑定，如下例：
<div id="app">
<p>{{ message }}</p>
<input v-model="message">
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Runoob!'
}
})
</script>
v-model指令用来在input、select、textarea、checkbox、radio等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定元素的值。
按钮的事件我们可用v-on指令监听，并对用户的输入进行绑定。下面的实例在用户点击按钮后对字符串进行反转操作：
<div id="app">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">反转字符串</button>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Runoob!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
</script>
(8)常用缩写：Vue为两个最常用的指令v-bind、v-on提供了特别的缩写
<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>
<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>
网友评论