VUE基础知识笔记
VUE
- vue双向绑定与事件处理（模型跟视图）
双向绑定v-model：视图中的数据发生改变，模型中的数据亦会发生改变，相反也是
事件处理v-on：click通过点击触发事件
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js">script>
head>
<body>
<div id="test">
<h2>这个人的名字是{{name}}h2>
<input type="text" v-model="num" /><input type = "button" value="增一" v-on:click = "num++"><input type = "button" value="减一" v-on:click = "num--">
<h2>这个人有{{num}}个女朋友h2>
div>
body>
<script type = "text/javascript">
var test = new Vue({
el:"#test",
data:{
name:"徐伟康",
num:1
}
});
script>
html>
- vue实例生命周期跟钩子函数
钩子函数：在创建vue实例的时候可以指定模板id、数据和方法，如果在实例化、渲染模板的过程中需要执行一些其他操作，可以使用钩子函数
钩子函数会在vue实例的各个生命周期阶段自动调用，具体有：beforeCreate，created，beforeMount，mounted，updated，beforeupdate，destory，beforeDestory
created钩子函数常用场景：用于初始化数据
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>钩子函数title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js">script>
head>
<body>
<div id="test">
<h2>{{msg}}h2>
div>
body>
<script type= "text/javascript">
var test = new Vue({
el:"#test",
data:{
msg:""
},
created:function(){
this.msg = "hello world vue .created";
alert(this);
}
/*
ECMAScript 6之后可以这样使用
create(){
}
*/
});
script>
html>
- 插值、v-text和v-html
插值：插值可以使用在需要显示vue实例数据的地方，可以在插值表达值中调用实例的数据属性和函数
v-text和v-html的作用：可以将数据在模板中进行显示
区别：v-html会对内容中出现的html标签进行渲染，而v-text会将内容作为普通文本输出到元素里面
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>钩子函数title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js">script>
head>
<body>
<div id="test">
v-text: <p v-text = "msg">p>
v-html: <p v-html = "msg">p>
p>
div>
body>
<script type= "text/javascript">
var test = new Vue({
el:"#test",
data:{
msg:"徐伟康
"
},
});
script>
html>
- v-model
- 双向选择，视图可以改变模型中的值，反之模型也可以改变视图中的值
- 多个checkbox对应一个model时，model的类型是一个数组，单个checkbox值是boolean类型，radio对应的值是input的value值，input和textarea默认对应的model是字符串，select单选对应字符串，多选对应的是数组
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-model的使用title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js">script>
head>
<body>
<div id="test">
<input type="checkbox" value="JAVA" v-model="msg"/>JAVA<br />
<input type="checkbox" value="MYSQL" v-model="msg"/>MYSQL<br />
<input type="checkbox" value="HTML" v-model="msg"/>HTML<br />
<h2>
你选择了：{{msg.join(",")}}
h2>
div>
body>
<script type= "text/javascript">
var test = new Vue({
el:"#test",
data:{
msg:[]
}
});
script>
html>
5.v-on的使用以及事件修饰符
在没有vue之前，页面可以通过onXxx响应事件;在vue中可以通过v-on指令响应事件
常用修饰符：
stop：阻止事件冒泡
pravent：阻止默认事件发生
capture：使用事件捕获模式
self：只有元素自身触发事件才执行（冒泡或者捕获的都不执行）
once：至执行一次
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-on的使用title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js">script>
head>
<body>
<div id="test">
<input type="button" value="增加" v-on:click="msg++" />
<input type="button" value="减少" @click="decrement"/>
<h2> 数值是：{{msg}}h2>
<hr />
事件冒泡测试：<br />
<div style="background-color: lightblue;width: 100px;height:100px" @click="print('这是div')">
<button @click.stop="print('这是button')">点我button>
div>
<hr />
阻止默认事件发生：<br />
<a href="https://www.baidu.com"@click.prevent="print('这是超链接')">baidua>
div>
body>
<script type= "text/javascript">
var test = new Vue({
el:"#test",
data:{
msg:1
},
methods: {
decrement:function(){
this.msg--;
},
print:function(str){
console.log(str);
}
}
});
script>
html>
6.v-for
便利对象
1 v-for=“value in object”
2 v-for="(value,key) in object"
3 v-for="(value,key,index) in object"
1个参数时,得到的是对象的值
2个参数时,第一个是值,第二个是键
3个参数时,第三个是索引,从0开始
便利数组
v-for=“item in items”
items:要遍历的数组,需要在vue的data中定义好。
item:循环变量
要索引时，索引也要写在参数中
v-for="(item,value) in items"
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js">script>
head>
<body>
<div id="test">
<ul>
<li v-for="(user,index) in users">
{{index}}--{user.name}}--{{user.age}}--{{user.gender}}
li>
<hr />
<li v-for="(value,key,index) in person">
{{index}}--{{key}}--{{value}}
li>
ul>
div>
body>
<script type="text/javascript">
var test = new Vue({
el:"#test",
data:{
users:[
{"name":"向外看","age":13,"gender":"男"},
{"name":"不久前","age":15,"gender":"女"},
{"name":"需要吗","age":18,"gender":"男"}
]
,person:{"name":"xwk","age":18,"gender":"男"}
}
});
script>
html>
- v-if,v-show
v-if：条件不满足的时候，元素不在
v-show：条件不满足时只是对元素进行隐藏
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js">script>
head>
<body>
<div id="test">
<button @click="show=!show">点我button>
<h2 v-if="show">hello Vueh2>
<ul>
<li v-for="(user,index) in users">
<p v-if="user.gender=='女'" style="background-color:pink">{{index}}--{{user.name}}--{{user.age}}--{{user.gender}}p>
<p v-else="user.gender=='男'" style="background-color:gray">{{index}}--{{user.name}}--{{user.age}}--{{user.gender}}p>
li>
ul>
<hr/>
<h2 v-show="show">
你好 唯有一
h2>
div>
body>
<script type="text/javascript">
var test = new Vue({
el:"#test",
data:{
show:true,
users:[
{"name":"向外看","age":13,"gender":"男"},
{"name":"不久前","age":15,"gender":"女"},
{"name":"需要吗","age":18,"gender":"男"}
]
}
});
script>
html>
- v-bind
可以对所有元素的属性设置vue实例的数据
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js">script>
<style type="text/css">
div {
width:100px;
height:100px;
color:black;
}
.red {
background-color:red;
}
.gray {
background-color:gray;
}
style>
head>
<body>
<div id="test">
<button @click="color='red'">redbutton>
<button @click="color='gray'">graybutton>
<div v-bind:class="color">
点击按钮改变颜色{{name}}
div>
div>
body>
<script type = "text/javascript">
var test = new Vue({
el:"#test",
data:{
color:"red",
name:"xwk"
}
});
script>
html>
9.计算属性的使用
computed计算属性的应用场景：可以应用在插值或者指令表达式复杂的时候，可以将一些属性数据经过方法处理之后返回（跟方法中的名字不能重复）
计算属性的主要特性就是为了将不经常变化的计算结果进行缓存，以节约我们的系统开销
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js">script>
head>
<body>
<div id="test">
<h2>
你的生日是：
{{new Date(birthday).getFullYear()}}-{{new Date(birthday).getMonth()+1}}-{{new Date(birthday).getDay()}}
h2>
<hr />
<h2>
你的生日是：
{{birth}}
h2>
div>
body>
<script type="text/javascript">
var test = new Vue({
el:"#test",
data:{
birthday:1429032123201
},
computed:{
birth(){
const date = new Date(this.birthday);
return date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDay();
}
}
});
script>
html>
10.watch基本和深度监控
使用场景：可以监控视图中数据的变化而做出响应;如：下拉框列表中，当如果选择了对应的下拉框选项之后，要根据最新值去加载一些其他数据
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js">script>
head>
<body>
<div id="test">
<input type="text" v-model="name"/>
<hr />
<input type="text" v-model="person.name" /><br>
<input type="text" v-model="person.age" /><button @click="person.age++">+button>
div>
body>
<script type="text/javascript">
var test = new Vue({
el:"#test",
data:{
name:"向外看",
person:{"name":"xwk","age":18}
},
watch:{
name(newValue,oldValue){
console.log("新值:"+newValue+"旧值:"+oldValue);
},
person:{
//开启深度监控，监控对象中的属性值变化
deep: true,
//可以获取到最新的对象属性数据
handler(obj){
console.log("name ="+obj.name+";age ="+obj.age);
}
}
}
});
script>
html>
- 组件使用
组件的使用场景：在项目需要重用某个模块（头部、尾部、新闻…）的时候，可以将模块抽取成组件，其他页面中注册组件并使用.
- 全局注册：在任何vue实例中都可以引用，如：一般网站的头部导航菜单
- 局部注册：可以在有需要的页面引入组件，如：商城网站首页页面中各种活动模块
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js">script>
head>
<body>
<div id="test">
<counter>counter>
<counter>counter>
<counter>counter>
div>
body>
<script type="text/javascript">
//定义组件
const counter = {
template:"",
data(){
return {num:0}
}
};
//全局注册组建：在所有的vue实例中都可以使用组建
//参数1：组件名称，参数2：具体的组件
//Vue.component("counter",counter);
var test = new Vue({
el:"#test",
//局部注册组件
components:{
counter:counter
}
});
script>
html>
- 父子组件传递数据
- 简单传递数据
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js">script>
head>
<body>
<div id="test">
<introduce :title="msg">introduce>
div>
body>
<script type="text/javascript">
//定义组件
const introduce = {
template:"{{title}}
",
//接受父组件的属性
props:["title"]
};
Vue.component("introduce",introduce);
var test = new Vue({
el:"#test",
//局部注册组件
data:{
msg:"父组件的msg属性数据内容"
}
});
script>
html>
- 数组传递
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js">script>
head>
<body>
<div id="test">
<my-List :items="lessons">my-List>
div>
body>
<script type="text/javascript">
//定义组件
const myList = {
template:`
- {{item.id}}--{{item.name}}
`,
//定义接受父组件的属性
props:{
items:{
//数据类型，如果是数组则是Array，如果是对象则是Object
type:Array,
//默认值
default:[]
}
}
};
var test = new Vue({
el:"#test",
data:{
msg:"父组件的msg属性内容",
lessons:[
{"id":1,"name":"向外看"},
{"id":2,"name":"不久前"},
{"id":3,"name":"来源于"}
]
},
components:{
myList
}
});
script>
html>
- 子组件向父组件通信
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js">script>
head>
<div id="app">
<h2>num = {{num}}h2>
<counter @plus="numPlus" @reduce="numReduce" :snum="num">counter>
div>
<script type="text/javascript">
//定义组件
const counter = {
template:`
`,
props:["snum"],
methods:{
//递增
incrNum(){
//调用到父组件中的方法
return this.$emit("plus");
},
decrNum(){
//调用到父组件中的方法
return this.$emit("reduce");
}
}
};
//全局注册组件：在所有的vue实例中都可以使用组件
//参数1：组件名称，参数2：具体的组件
//Vue.component("counter", counter);
var app = new Vue({
el:"#app",
components:{
counter: counter
},
data:{
num:0
},
methods:{
numPlus(){
this.num++;
},
numReduce(){
this.num--;
}
}
});
script>
html>
- axios
axios的用途及了解常见方法
axios的作用：发送异步请求获取数据。常见的方法：get，post;在发送的时候可以指定参数（地址、请求方式和请求头部信息）;返回数据结构（data/status/statusText/headers/config）
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>Documenttitle>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js">script>
<script src="https://unpkg.com/axios/dist/axios.min.js">script>
head>
<body>
<div id="app">
<div> {{info.name}}div>
div>
body>
<script >
var app = new Vue({
el:"#app",
data(){
return{
info:{
name:null
}
}
},
mounted(){
axios.get('data.json').then(response=>(this.info=response.data))
}
});
script>
html>
json数据
{
"name": "xwk",
"age":18,
"address":{
"street":"qslt",
"city": "suzhou",
"country" :"china"
}
}
- 插槽slot
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>Documenttitle>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js">script>
head>
<body>
<div id="app">
<todo>
<todo-title slot="todo-title" :title="title">todo-title>
<todo-items slot="todo-items" v-for = "item in todoItems" :item="item">todo-items>
todo>
div>
body>
<script type="javascript">
Vue.component("todo",{
template:
'\
\
\
'
});
Vue.component("todo-title",{
props: ['title'],
template:'{{title}}'
});
Vue.component("todo-items",{
props: ['item'],
template:'{{item}}'
});
var app = new Vue({
el:"#app",
data:{
title:"xwk",
todoItems: ['1','2','3']
}
});
script>
html>
- 自定义事件内容分发
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>Documenttitle>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js">script>
head>
<body>
<div id="app">
<todo>
<todo-title slot="todo-title" :title="title">todo-title>
<todo-items slot="todo-items" v-for = "(item,index) in todoItems" :item="item" :index="index" @remove="removeItems(index)" >todo-items>
todo>
div>
body>
<script >
Vue.component("todo",{
template:
'\
\
\
'
});
Vue.component("todo-title",{
props: ['title'],
template:'{{title}}'
});
Vue.component("todo-items",{
props: ['item','index'],
template:'{{item}} ',
methods: {
remove :function (index) {
this.$emit('remove', index);
}
}
});
var app = new Vue({
el:"#app",
data:{
title:"xwk",
todoItems: ['1','2','3']
},
methods: {
removeItems : function(index){
this.todoItems.splice(index,1);
}
}
});
script>
html>