一、Vue简介
1.vue介绍
Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。
Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
Vue.js是一个MVVM模式的框架，如果读者有angular经验，一定能够很快入门Vue的。
- Vue.js可以作为一个js库来使用，也可以用它全套的工具来构建系统界面，这些可以根据项目的需要灵活选择，所以说，Vue.js是一套构建用户界面的渐进式框架。
- Vue的核心库只关注视图层，Vue的目标是通过尽可能简单的 API 实现响应的数据绑定，在这一点上Vue.js类似于后台的模板语言。
- Vue也可以将界面拆分成一个个的组件，通过组件来构建界面，然后用自动化工具来生成单页面(SPA - single page application)系统
vue.js的特点:
易用： 已经会了HTML,CSS,JavaScript？即刻阅读指南即可开始构建应用！
灵活： 简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。
高效： 16kb min+gzip 的运行大小,超快虚拟 DOM ,最省心的优化
2.vue.js使用文档以及Vue.安装
Vue.js使用文档已经写的很完备和详细了，通过以下地址可以查看： https://cn.vuejs.org/v2/guide/
安装：
- 可以在 Vue.js 的官网上直接下载 vue.min.js 并用 <script> 标签引入。
https://cn.vuejs.org/v2/guide/installation.html - 使用CDN方法，<script src="https://cdn.jsdelivr.net/npm/vue"></script>
Vue.js基本概念
1.vue.js概述：
- vue.js和JQuery.js都是js封装的模块;
- 各有各的特点,但是现在用vue的人越来越多;
- Vue.js的特点:a. 没有DOM的概念; b.以数据驱动为核心；
Vue.js操作的特点：
a. script标签中Vue对象里面定义变量和方法；
b. 在标签上操作变量或者方法；
c. 和JQ使用思路不同
2. vue的格式
每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<!-- 将来new的Vue实例，会控制这个元素的所有内容 ， Vue实例所控制的这个元素区域，就是我们的V-->
<div id="app">
<p>{{ message }}</p>
</div>
<script>
// 创建一个Vue实例
// 当我们导入包之后，在浏览器的内存中，就多了一个Vue构造函数，这里我们new出来的这个vm对象，就是我们mvvm中的vm调度者
var vm = new Vue({
el: '#app', // 表示当前我们new的这个Vue实例，要控制页面上的哪个区域。
data: { //data属性中，存放的是el中要用到的数据，这里data就是MVVM中的M，专门用来保存每个页面的数据的。
message: 'Hello Vue.js!' //通过Vue提供的指令，很方便就能把数据渲染到页面上，程序员不再手动操作DOM元素了【前端Vue之类的框架，不提倡我们手动操作DOM元素了】
}
})
</script>
</body>
</html>
其中，el属性对应一个标签，当vue对象创建后，这个标签内的区域就被vue对象接管，在这个区域内就可以使用vue对象中定义的属性和方法。
3. 数据与方法
当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其data对象中能找到的所有的属性。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。还可以在Vue实例中定义方法，通过方法来改变实例中data对象中的数据，数据改变了，视图中的数据也改变。
三、vue的模板语法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 模板语法</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app" class="app_class">
<ul>
<!-- 操作子元素，可以放入短句或者变量 -->
<li>vue可以操作子元素:{{str1}}</li>
<li>vue的胡子语法中，放入的是js程序(变量/短语句)：{{str1.split('').reverse().join('')}}</li>
<!-- 操作操作数值 -->
<li>{{num1 + 1}}</li>
<!-- 操作三元表达式 A ? B:C -->
<li>性别:{{ gender==0 ? "女":"男"}}</li>
</ul>
<!-- vue的属性操作，大多数都是用v-bind -->
<a v-bind:href="url">验证vue的属性绑定,跳转到百度</a>
<a :href="url"> 属性绑定简写</a>
<br><br>
<!-- vue事件绑定：v-on:事件 -->
<!-- 方法去methods里面找。 -->
<button v-on:click="fun1()"> vue事件绑定</button>
<!-- 不写函数，写逻辑 -->
<button v-on:click='num1+= 2'>不执行函数</button>
<!-- 事件绑定，使用@作为简写 -->
<button @click='fun2(3)'>vue事件绑定</button>
</div>
<script>
var vm =new Vue({
el: ".app_class",
data:{
str1: 'helloworld',
num1: 1,
gender:0,
url: 'http://www.baidu.com'
},
methods: {
fun1: function(){
//操作num1
this.num1 +=1
},
fun2: function(num){
// 注意：在vm实例中，如果想要获取data上的数据，或者调用methods中的方法，必须通过this.数据属性名或this.方法名来进行访问，这里的this就表示我们new出来的VM实例对象。注意，VM实例，会监听自己身上data中所有数据的改变，只要数据发生变化，就会自动把最新的数据，从data上同步到页面中去【好处：程序员只需要关心数据，不需要考虑如何重新渲染DOM页面】
this.num1 +=num
}
}
});
</script>
</body>
</html>
image.png
四、Class绑定：事件绑定：
1.class绑定
使用v-bind指令来设置元素的class属性，它们的属性值可以是表达式，vue.js在这一块做了增强，表达式结果除了是字符串之外，还可以是对象或者数组。
2.vue对象的操作:
- 单个属性语法：
可以给v-bind:class传一个对象，以动态的切换class - 对象值语法：
属性的值为true的值会被添加到class属性中去; 如果是false,则不会被添加 - 数组值语法
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue class属性操作</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app" class="app_class">
<!-- 1.单个值 -->
<div class='current' v-bind:class='classData1'>
class属性单个值传递
</div>
<!-- 2.对象值: 属性值为true的值会被添加到class属性中 -->
<div :class="{'aaa':bool1, 'bbb':bool2}">
class属性值传递对象:方法1
</div>
<div :class="obj">
class属性值传递对象:方法2
</div>
<!-- 3. 数组值 -->
<div :class="[classData1, classData2, obj]">
class属性值传递数组值:方法1
</div>
<div :class="[classData1,bool2?'active1':'active2']">
class属性值传递数组值:方法2
</div>
</div>
<script>
var vm =new Vue({
el: "#app",
data:{
// 单个属性值
classData1: 'aaa',
classData2: 'bbb',
// 对象值：键值对
bool1:true,
bool2:false,
obj:{ // 声明一个对象值
'ccc':true,
'ddd':false,
}
}
});
</script>
</body>
</html>
效果
image.png
案例：vue实现选项卡功能
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue实现选项卡功能</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<style>
.tab_con{
width:500px;
height:350px;
margin:50px auto 0;
}
.tab_btns{
height:50px;
}
.tab_btns input{
width:100px;
height:50px;
background:#ddd;
border:0px;
font: 18px/50px 'simsun';
float: left;
cursor: pointer;
outline:none;
}
.tab_btns .active{
background:gold;
}
.tab_cons{
height:300px;
}
.tab_cons div{
height:300px;
line-height:300px;
text-align:center;
display:none;
font-size:30px;
}
.tab_cons .current{
display:block;
background:gold;
}
</style>
</head>
<body>
<div class="tab_con">
<div class="tab_btns">
<input type="button" value="按钮一" v-on:click="index='0'" v-bind:class="index=='0'?'active':''" >
<input type="button" value="按钮二" @click="index='1'" :class="index=='1'?'active':''" >
<input type="button" value="按钮三" @click="index='2'" :class="index=='2'?'active':''" >
<input type="button" value="按钮四" @click="index='3'" :class="index=='3'?'active':''" >
<input type="button" value="按钮五" @click="index='4'" :class="index=='4'?'active':''" >
</div>
<div class="tab_cons">
<div :class="index=='0'?'current':''">按钮一对应的内容</div>
<div :class="index=='1'?'current':''">按钮二对应的内容</div>
<div :class="index=='2'?'current':''">按钮三对应的内容</div>
<div :class="index=='3'?'current':''">按钮四对应的内容</div>
<div :class="index=='4'?'current':''">按钮五对应的内容</div>
</div>
</div>
<script>
var vm = new Vue({
// 实现思路:
// a. 通过点击按钮，修改索引值index; b.clss属性通过判断索引值修改值
el: '.tab_con',
data:{
index: '0'
}
});
</script>
</body>
</html>
效果：
image.png
3.style属性操作：
- 放对象：
注意：js不支持中划线，需要使用中划线的时候使用引号（" "）或者小驼峰命名 - 放数组：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>style属性操作</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<style>
</style>
</head>
<body>
<div id="app">
<!-- style属性操作-->
<!-- 1.对象 -->
<div v-bind:style="{'width': width, 'height': height, 'background-color': divColor}">
放对象1
<div>
<div :style="obj1">
放对象2
</div>
<!-- 2.数组 -->
<div :style="[obj1, obj2]">
放数组
</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data:{
// 定义style属性
width: "200px",
height: "200px",
divColor: "red",
// 定义对象
obj1:{
width:'300px',
height:'300px',
"background-color":'skyblue',
},
//定义对象2
obj2:{
width:'400px',
height:'400px',
"font-size":'36px',
"background-color":'green',
},
}
});
</script>
</body>
</html>
效果
image.png
五、条件渲染(v-if)
通过条件指令可以控制元素的创建(显示)或者销毁(隐藏)，常用的条件指令如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-if条件渲染</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<style>
</style>
</head>
<body>
<div id="app">
<!-- v-if-->
<div v-if="bool1" > v-if语句，是true就显示，否则隐藏</div>
<!-- v-if v-else -->
<div v-if="bool2">v-if v-else语句，二选一(1)</div>
<div v-else>v-if v-else语句，二选一(2)</div>
<!-- v-if v-else-if v-else-->
<div v-if="str1 == '一'">v-if v-else-if v-else多选一(一)</div>
<div v-if="str1 == '二'">v-if v-else-if v-else多选一(二)</div>
<div v-if="str1 == '三'">v-if v-else-if v-else多选一(三)</div>
<div v-else>v-if v-else-if v-else多选一(四)</div>
<!-- v-show v-if-->
<!-- v-show:控制的是元素的display属性block与none,而v-if则是直接存不存在 -->
<div v-show="bool2">show</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data:{
// 直接定义bool值
bool1:true,
bool2: false,
str1: "二",
}
});
</script>
</body>
</html>
效果：
image.png
六、列表渲染遍历(v-for)
1. 可以放入对象或者数组：
v-for：生成多个标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-if条件渲染</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<style>
</style>
</head>
<body>
<div id="app">
<!-- v-for的功能:生成多个标签 -->
<ul>
<!-- 1.1 遍历数组:拿到元素 -->
<li v-for="item in arr">{{item}}</li>
<!-- 1.2 遍历数组:拿到索引和元素 -->
<li v-for="(item, index) in arr">{{item}}：对应的索引：{{index}}</li>
<!-- 2.1 遍历对象:拿到键值对中的值 -->
<li v-for="value in obj">{{value}}</li>
<!-- 2.2 遍历字典:拿到键值对的键值关系 -->
<li v-for="(value,key) in obj">{{value}}—>{{key}}</li>
</ul>
</div>
<script>
var vm = new Vue({
el: '#app',
data:{
// 定义一个数组
arr:["<三国演义>", "<水浒传>", "<西游记>", "<红楼梦>"],
// 定义一个对象
obj:{
'name':"小P",
"gender": 18,
"address":"广东"
},
}
});
</script>
</body>
</html>
效果：
image.png
七、表单输入绑定
表单属性，vue用v-model设置一个变量，和表单属性时时同步。
表单属性的值(value/checked/selected)：都会同步到v-model的变量值里面去。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-if条件渲染</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<style>
</style>
</head>
<body>
<div id="app">
<!-- 对input的value操作-->
<input type="text" value="init-data" v-model="input_text">
<div>input中的值是：{{input_text}}</div>
<br>
<!-- 文本域-->
<textarea v-model="message" placeholder="test the multiple lines">{{ message }}</textarea>
<div>input中的值是：{{message}}</div>
<br>
<!-- 单选按钮radio -->
性别：
<input type="radio" name="gender" value="0" v-model="sex">女
<input type="radio" name="gender" value="1" v-model="sex">男
<div>单选按钮的值是:{{ sex }}</div>
<br>
<!-- 复选框checkbox -->
<input type="checkbox" name="programs_language" value="C" v-model="coding">C
<input type="checkbox" name="programs_language" value="C++" v-model="coding">C++
<input type="checkbox" name="programs_language" value="Python" v-model="coding">Python
<input type="checkbox" name="programs_language" value="Java" v-model="coding">Java
<div>多选框的值:{{ coding }}</div>
<br>
<!-- 下拉菜单-->
<select v-model="selected_opt">
<option value="0">北京</option>
<option value="1">上海</option>
<option value="2">广州</option>
<option value="3">深圳</option>
</select>
<div>下拉菜单的值:{{ selected_opt }}</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data:{
input_text: "",
message:"test textarea",
sex: "1",
coding:[],
selected_opt: "0",
}
});
</script>
</body>
</html>
测试效果：
image.png
小结：
- v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。如代码中给input初始化"init-data"但是显示的还是空的，因为data里面给的是空""的。
- v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件：
1） text 和 textarea 元素使用 value 属性和 input 事件；
2） checkbox 和 radio 使用 checked 属性和 change 事件；
3）select 字段将 value 作为 prop 并将 change 作为事件。
v-model只适用于表单控件中
vue案例
实现聊天窗口
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue实现聊天窗口</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<style>
.talk_container{
width:600px;
height:500px;
border:1px solid #666;
margin:50px auto 0;
background:#f9f9f9;
}
.talk_content{
width:580px;
height:420px;
border:1px solid #666;
background:#fff;
margin:10px auto 0;
overflow:auto;
}
.talk_input_main{
width:580px;
margin:10px auto 0;
}
.whotalk{
width:80px;
height:30px;
float:left;
outline:none;
}
.talk_input{
width:420px;
height:26px;
padding:0px;
float:left;
margin-left:10px;
outline:none;
text-indent:10px;
}
.talk_btn{
width:56px;
height:30px;
float:left;
margin-left:10px;
}
.atalk{
margin:10px;
}
.atalk span{
display:inline-block;
background:#0181cc;
border-radius:10px;
color:#fff;
padding:5px 10px;
}
.btalk{
margin:10px;
text-align:right;
}
.btalk span{
display:inline-block;
background:#ef8201;
border-radius:10px;
color:#fff;
padding:5px 10px;
}
</style>
</head>
<body>
<div id="talk_container">
<!-- 显示区域 -->
<div class="talk_content">
<div :class="temp.person == '小P' ? 'atalk':'btalk' " v-for="temp in dataArr">
<span>{{temp.person}}说：{{temp.say}}</span>
</div>
</div>
<!-- 发送内容区域 -->
<div class="talk_input_main">
<!-- 选项：带有selected的选项，value值和select标签共享-->
<select class="whotalk" v-model="selected_opt">
<option value="0">小P说：</option>
<option value="1">大P说：</option>
</select>
<!-- 请输入内容 -->
<input type="text" class="talk_input" v-model="input_content">
<!-- 按钮 -->
<input type="button" value="发送" class="talk_btn" @click="sendData">
</div>
</div>
<script>
var vm = new Vue({
el: '#talk_container',
data:{
dataArr:[ // 用列表套对象的方式, 保存聊天内容
{"person":"小P", "say":"约吗？" },
{"person":"老P", "say":"约我？可以吗？" },
],
input_content:"", // 保存输入框内容
selected_opt:"0", //选择A说还是B说
},
methods:{
sendData: function(){
var str3 = this.selected_opt == '0'?'小P':'老P'; //this表示当前实例化对象
var obj = {'person':str3, 'say':this.input_content};
this.dataArr.push(obj)
this.input_content="";
document.querySelector(".talk_input").focus();
}
},
});
</script>
</body>
</html>
页面效果
image.png
Vue实现ToDoList案例
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue实现聊天窗口</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<style>
</style>
</head>
<body>
<div class="list-container">
<h2>代办事项</h2>
<input type="text" class="input_onething" v-model="onething">
<input type="button" name="" value="增加" class="add-onething" @click="addThing">
<!-- 写好了往ul中放入 -->
<ul class="list-thing">
<li v-for="(one_thing,index) in something ">
<span>{{index}}.{{one_thing}}</span>
<a href="javascript:;" class="up" @click="up(index)">↑</a>
<a href="javascript:;" class="down" @click="down(index)">↓</a>
<a href="javascript:;" class="del" @click="del(index)">删除</a>
</li>
</ul>
</div>
<script>
var vm = new Vue({
el: '.list-container',
data:{
onething:"",
something:["复习python", "看面试题", "学习vue与DRF项目结合"],
},
methods:{
addThing: function(){
if (this.onething.trim().length==0){
alert("添加的数据不能为空...")
return;
}
this.something.splice(0, 0, this.onething);
this.onething = '';
},
up: function(index){ // 往上移动
if (index == 0){
alert("已经是第一个了...")
return;
}
this.something.splice(index-1, 0, this.something.splice(index,1)[0])
},
down: function(index){
if (index == this.something.length-1){
alert("已经是最后一个了...")
return;
}
// index+1位置添加，中间0表示不是删除，最后一个参数表示返回删除的index项目
this.something.splice(index+1, 0, this.something.splice(index,1)[0])
},
del: function(index){
// 要删除的项目数量。如果设置为 0，则不会删除项目。此处要删除一条记录所以为1
this.something.splice(index,1)
},
},
});
</script>
</body>
</html>
页面效果
image.png
计算属性
模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue实现选项卡功能</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<style>
</style>
</head>
<body>
<div id="app">
{{message.split('').reverse().join('')}}
</div>
<script>
var vm = new Vue({
el: '#app',
data:{
message: 'Django and Vue'
}
});
</script>
</body>
</html>
image.png
在这个地方，模板不再是简单的声明式逻辑。你必须看一段时间才能意识到，这里是想要显示变量 message 的翻转字符串。当你想要在模板中多次引用此处的翻转字符串时，就会更加难以处理。
所以，对于任何复杂逻辑，应当使用计算属性。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue实现选项卡功能</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<style>
</style>
</head>
<body>
<div id="app">
<p>原始字符串: {{ message }}</p>
<p>计算后反转字符串: {{ reversedMessage }}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data:{
message: 'Django and Vue'
},
computed:{
// 计算属性的 getter
reversedMessage: function(){
// `this` 指向 vm 实例
return this.message.split('').reverse().join('');
}
}
})
</script>
</body>
</html>
image.png
这里我们声明了一个计算属性 reversedMessage。我们提供的函数将用作属性 vm.reversedMessage 的 getter 函数。
你可以像绑定普通属性一样在模板中绑定计算属性。Vue 知道 vm.reversedMessage 依赖于 vm.message，因此当 vm.message 发生改变时，所有依赖 vm.reversedMessage 的绑定也会更新。而且最妙的是我们已经以声明的方式创建了这种依赖关系：计算属性的 getter 函数是没有副作用 (side effect) 的，这使它更易于测试和理解。
computed vs methods
我们可以通过在表达式中调用方法来达到同样的效果：
<p>Reversed message: "{{ reversedMessage() }}"</p>
// 在组件中
methods: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}
我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。
如求当前时间：
computed: {
now: function () {
return Date.now()
}
}
因为 Date.now() 不是响应式依赖，所以不能通过计算属性方式，相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。
场景
我们为什么需要缓存？假设我们有一个性能开销比较大的计算属性 A，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A 。如果没有缓存，我们将不可避免的多次执行 A 的 getter！如果你不希望有缓存，请用方法来替代。
计算属性setter
计算属性默认只有 getter ，不过在需要时你也可以提供一个 setter ：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>计算属性setter</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<style>
</style>
</head>
<body>
<div id="app">
<p>{{ fullName }}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data:{
firstName: 'Xiao',
lastName: 'Python'
},
computed:{
fullName:{
// getter
get: function(){
return this.firstName + ' ' + this.lastName;
},
// setter
set: function(newValue){
var names = newValue.split(' ');
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
}
})
vm.fullName = 'New Vue';
</script>
</body>
</html>
现在再运行 vm.fullName = 'New Vue' 时，setter 会被调用，vm.firstName 和 vm.lastName 也会相应地被更新。
image.png
小结
- v-if
- v-show
- v-bind 绑定属性 ：
- v-on 绑定事件 @，所有的原生js的事件使用v-on都可以绑定
- v-for 遍历
- v-html 解析html标签
- v-text v-html {{}}: 对页面的dom进行赋值运算 相当与js中innerText innerHTML
- v-model 只适用于在表单控件，双向数据绑定的一个体现
双向数据绑定 = 单向数据绑定 + UI监听
八、组件简单使用
vue的核心基础就是组件的使用，玩好了组件才能将前面学的基础更好的运用起来，组件的使用更使我们的项目解耦合，更加符合vue的设计思想MVVM。
组件提高可复用性。
全局组件使用：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue全局组件</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<style>
</style>
</head>
<body>
<div id="app">
<Vheader></Vheader>
</div>
<script>
//组件的创建
Vue.component('Vheader',{ // Vheader组件名，建议首字母大写
data: function(){ // data必须是个函数 函数一定要返回 {}
return { //必须要return,哪怕是空对象
}
},
template: '<div class="head-box">\n' +
' <header>导航栏</header>\n'+
'</div>'
})
var vm = new Vue({
el: '#app',
data:{
},
computed:{
},
methods:{
},
})
</script>
</body>
</html>
image.png
局部组件：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue局部组件</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<style>
</style>
</head>
<body>
<div id="app">
<Vheader></Vheader>
</div>
<script>
var Header = {
template: '<header>我是头部（局部组件）</header>'
}
var vm = new Vue({
el: '#app',
data:{
},
methods:{
},
computed:{
},
components:{
// Vheader局部组件，智能在这个实例中使用
'Vheader': Header
}
})
</script>
</body>
</html>
网友评论