vue=view
下载:
1.开发版本【开发者在进行开发时使用,体积较大,但功能较多】:https://cn.vuejs.org/js/vue.js
2.生产版本【生产者在开发完毕后,打包给用户使用,体积小且能保留主要功能】:https://cn.vuejs.org/js/vue.min.js
3.在线引用:https://cdn.jsdelivr.net/npm/vue/dist/vue.js。
引入
引入方法在html中均为使用script标签:
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
引入后在html中便存在一个vue变量。
创建简单demo
1.变量插值:使用双大括弧来表示——{{变量}},如下a就是一个插值变量,后续可在script中进行交互。
<div id="app">
{{a}}
</div>
2.Vue变量实例化:如下(在script标签中)为实例化一个Vue变量。输入的参数为el—元素的id或者class,此处使用的是id,用#,如果为class,则使用点,从而实现vue变量与标签的绑定;data参数为声明或赋值变量,该变量是绑定的标签下存在的插值。
var app = new Vue({
el: '#app',
data: {
a: 'Hello Vue!'
}
});
数据与实例
重述上述2中内容。既vue实例化后对象存在原有变量、方法和用户变量,为了区别原有变量与用户变量,使用$符号来进行区别:
【回调函数:回调函数是作为参数传递给另一个函数的函数,然后在外部函数内部调用该回调函数以完成某种例程或操作,简而言之就是函数的函数参数】
html标签中代码:
<div id="app">
{{a}}--{{b}}
</div>
js中代码,使用了$符号(不加也不影响使用)的是原有变量,而没有使用则为用户变量:
var data = { a : 1,b : 2 };
var vm = new Vue({
el : "#app",
data : data
});
vm.$data.a = "test";
vm.b = "notest";
如在上述代码中使用Object.freeze(data)【把该变量冻结了】,则会组织系统追踪变化,页面不显示任何内容。
观察vue变量的方法使用watch,该方法可以监视最新值与最旧值,第一个参数为变量名,第二个参数为回调函数,回调函数的参数为返回的最新值与最旧值:
vm.$watch('a', function(newVal, oldVal){
console.log(newVal, oldVal);
})
生命周期
【生命周期钩子】——实例化过程中有许多过程,整个过程加起来就是一个生命周期,在不同生命周期阶段用户可以添加自己的函数,添加过程则必须使用生命周期钩子。
以下示例介绍了基本的几个钩子,具体参考:https://cn.vuejs.org/v2/api/#beforeCreate
var vm = new Vue({
el : "#app",
data : {
msg : "hi vue",
},
//在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
beforeCreate:function(){
console.log('beforeCreate');
},
/* 在实例创建完成后被立即调用。
在这一步,实例已完成以下的配置:数据观测 (data observer),属性和方法的运算,watch/event 事件回调。
然而,挂载阶段还没开始,$el 属性目前不可见。 */
created :function(){
console.log('created');
},
//在挂载开始之前被调用:相关的渲染函数首次被调用
beforeMount : function(){
console.log('beforeMount');
},
//el 被新创建的 vm.$el 替换, 挂在成功
mounted : function(){
console.log('mounted');
},
//数据更新时调用
beforeUpdate : function(){
console.log('beforeUpdate');
},
//组件 DOM 已经更新, 组件更新完毕
updated : function(){
console.log('updated');
}
});
插值与指令
使用双大括号进行插值,插值包括变量插值与表达式插值;指令的功能之一便是对插值变量进行相关属性设置。
使用v-once指令可以使得插值变量的值可且仅被修改一次。
使用v-html指令可以使得插值变量被编译为html语言。
使用v-bind指令可以动态设置标签属性。
<div id="app" v-once>
{{a}}
</div>
<p v-html="rawHtml"></p>
var vm = new Vue({
el : "#app",
data : {
msg : "hi vue",
rawHtml : '<span style="color:red">this is should be red</span>',//v-html的变量绑定并赋值
color:'blue',
number : 10,
ok : 1,
message : "vue"
}
});
<div v-bind:class="color">test...</div>
var vm = new Vue({
el : "#app",
data : {
msg : "hi vue",
rawHtml : '<span style="color:red">this is should be red</span>',
color:'blue',//对color进行赋值,color在网页代码中显示为blue
number : 10,
ok : 1,
message : "vue"
}
});
.blue{color:blue; font-size:100px;}//设置blue内容
<p>{{ number + 1 }}</p>
<p>{{ 1 == 1 ? 'YES' : 'NO' }}</p>//?之前的是一个判断表达式,如果真则执行?后的,如果假则执行:后的
<p>{{ message.split('').reverse().join('') }}</p>
//插入表达式
指令
使用v-xxx来进行指定,目的为动态的对控制dom或对dom内的插值变量控制,在原始html中不会显示v-xx。分为直接赋值(=)、参数(:x=xx)、动态参数
【v-if】——<p v-if="seen">现在你看到我了</p>——此处seen是一个变量,用双引号来包住,通过在vue初始化过程中对其赋值从而动态控制seen的值。
v-if后的值为真则渲染该DOM,否则不渲染该绑定的DOM。
【v-bind(可省略直接使用:)】——<a v-bind:href="url">...</a>——v-bind:参数=变量名【在html中显示】,如果url="www.hao123.com",则最终在html中显示为<a href="www.hao123.com">...</a>
使用中括号可以设置“参数”变量,既将上述的herf也当作一个变量,在data可对其进行赋值。如——<a v-bind:[attributeName]="url"> ... </a>,如果在data下有一个attributeName:"src",则最终结果为<a src="url"> ... </a>。
【v-on:= @ 】——<a v-on:click="doSomething">...</a>——v-on:参数=变量名【在html中均不显示】,只不过此处的参数通常为监听的事件名,dosomething通常为回调函数名称,在初始化的methods下写入。
<div @click="click1">
<div @click.stop="click2">
click me
</div>
</div>
//click代码嵌套时候,只要点击clickme,那么两层嵌套都将处罚,如果想只触发一层,则使用@click.stop。
class与style绑定【普通是变量,键值对后面是变量】
【对象语法】:我们可以传给 v-bind:class
一个字典对象,以动态地切换 class:
<div v-bind:class="{ active: isActive }"></div>
//""代表的是一个键值对的变量,active是具体类名,其存在与否取决于isActive
该字典对象中也可存在多个键值对,且该指令类可与普通类同时作用与DOM。
<div
class="static"
v-bind:class="{ active: isActive, 'text-danger': hasError }"
></div>
data: {
isActive: true,
hasError: false
}
-->> <div class="static active"></div>
【数组语法】给v-bind:class=“[]”输入的参数为一个数组,数组内的变量任然是由data内变量值决定,这是静态参数;动态参数的话可以采用数组嵌套字典来进行设置。
<div v-bind:class="[activeClass, errorClass]"></div>//静态参数
data: {
activeClass: 'active',
errorClass: 'text-danger'
}
<div v-bind:class="[{ active: isActive }, errorClass]"></div>//动态参数
同理可应用于style,style后是字典。
条件渲染
【v-if】正真的条件渲染
【v-else】
【v-else-if】
【v-show】惰性条件渲染,始终渲染但使用css进行隐藏
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>
//type通过修改data中值
<h1 v-show="ok">Hello!</h1>
//h1显示与否取决于ok变量的值,也可以是一个表达式
列表渲染
【v-for】类似于python的for语句,数组依次返回个体值,索引;字典依次返回值,键,索引。
<li v-for="item,index in items">
{{index}}{{ item.message }}
</li>
<li v-for="value, key in object">
{{key}} : {{ value }}
</li>
data : {
items : [
{ message: 'Foo' },
{ message: 'Bar' }
],
object: {
title: 'How to do lists in Vue',
author: 'Jane Doe',
publishedAt: '2016-04-10'
}
}
为了给 Vue 一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,需要为每项提供一个唯一 key
attribute:
<div v-for="item,index in items" v-bind:key="index">
<!-- 内容 -->
</div>
事件绑定
@click=“回调函数”。获取DOM事件时可用$event特殊变量进行获取(一般默认如果没有对其赋值就是一个响应事件变量)
<button v-on:dblclick="greet('abc', $event)">Greet</button>
//此处传入的$event就是响应对象
事件修饰符——修饰事件绑定如修饰click的有。
.stop
.prevent
.capture
.self
.once
.passive
表单输入与绑定
【v-model=变量】该变量就是与空间绑定的变量
记住这个例子:
<input v-model="searchText"> 等价于 <input v-bind:value="searchText" v-on:input="searchText = $event.target.value" >
1.获取事件响应的抛出值 2.将抛出值值赋值给自定义变量(用于后续在vue中写入方法) 3.将抛出值赋值给input的属性
【v-model】
在内部为不同的输入元素使用不同的 property 并抛出不同的事件:
- text 和 textarea 元素使用
value
property 和input
事件; - checkbox 和 radio 使用
checked
property 和change
事件; - select 字段将
value
作为 prop 并将change
作为事件。
<input v-model="message" placeholder="edit me">//placeholder是代表占位符
<p>Message is: {{ message }}</p>
<span>Multiline message is:</span>
<p style="white-space: pre-line;">{{ message }}</p>
<textarea v-model="message" placeholder="add multiple lines"></textarea>
//调用了input事件并跟踪了value的值
<div style="margin-top:20px;">
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label> // for 属性规定 label 与哪个表单元素绑定。 作用是 在点击label 时会自动将焦点移动到绑定的元素上
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span>
</div>
//复选框
<div style="margin-top:20px;">
<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<br>
<span>Picked: {{ picked }}</span>
</div>
//单选框
组件基础
使用Vue.component()定义组件,第一个参数为组件名称,第二个参数为数据,第三个参数为template也就是模板。实质上是具有特定功能的众多控件的集合,多个控件需要用div包裹。其可复用。
// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
data: function () {
return {
count: 0
}
},
template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})
Vue.component('my-component-name', { // ... options ... })全局进行注册
在option中包括
- prop:[a,b,c,d]——自定义的组件的属性,类似于标签的属性一样。
- data——提供数据,必须以函数形式书写
- template——模板数据,只能使用一个根模板
- method——提供方法
监听子组件事件——自定义模板的响应名称与抛出值
<button-counter title="title1 : " @clicknow="fun1($event)">//父组件
<h2>hi...h2</h2>
</button-counter>
Vue.component('button-counter', {
props: ['title'],
data: function () {
return {
count: 0
}
},
template: '<div><h1>hi...</h1><button v-on:click="clickfun">{{title}} You clicked me {{ count }} times.</button><slot></slot></div>',
methods:{
clickfun : function () {
this.count ++;
this.$emit('clicknow', this.count);
}
}
})
//基于原始的onclick事件,执行clickfun函数;
//在methods中重写clickfun函数
//使用this.$emit()进行自定义组件事件,其中第一个参数为事件名称,第二个参数为抛出数值。
//如果没有this.count ++等需求,则可以直接写作:@:click=$emit('clicknow',count)
//父组件可以使用@clicknow="fun1($event)【此处省略$event也可以,默认为回调函数第一个参数为$event】来对抛出数值进行访问
插槽分发内容
<alert-box>
Something bad happened.
</alert-box>
报错,写成这样即可
Vue.component('alert-box', {
template:
<div class="demo-alert-box">
<strong>Error!</strong>
<slot></slot>
</div>
})