Vue基础
复习
- options的根属性
- el : 目的地(string||DOM元素)
- template : 模板
- data : 可以直接返回一个对象,也可以是一个函数,然后return一个对象; 在对象中的属性,可以直接在页面中用key使用,但是在js中要使用this.key
- components : 用来声明组件的一个对象属性,key是组件名,value是组件对象
- methods : 存放方法的对象属性,通过
methodName : function() {code lines }
- props : (因为在vue中子组件接收父组件传来的值是通过属性来传值的)子组件接收参数的属性[‘属性名1’, ‘属性名2’]
- 指令
- v-text / v-html:text就是给元素的innerText属性赋值(v-text必须在双标签中);html就是给元素的innerHtml属性赋值
- v-if / v-show :if就是是否插入或者移除;show就是是否显示或者隐藏
- v-else-if / v-else:这两个只能够和v-if指令配合使用
- v-bind / v-on:bind是绑定属性用的;on就是用来绑定事件用的
- v-bind 的简写:
:属性名 = "变量||常量名"
- v-on 的简写:
@原生事件名 = "给变量进行的操作||变量名"
- v-bind 的简写:
- v-bind / v-model:bind是单向传输数据,vue到页面;model是双向传输数据,vue到页面然后页面再到vue,v-model只能使用在具有value属性的元素
注册全局组件
- 应用场景:多处使用的公共性功能组件,就可以注册成全局组件,减少冗余代码
- 注册全局组件的API:
Vue.component('组件名', 组件对象)
<div id="app"></div>
<script src="js/vue.min.js"></script>
<script>
// 注册公共的全局组件
Vue.component('my_button', {
template : `
<button style = 'background-color : red;'>这是一个公共的漂亮的按钮</button>
`
})
// 创建header组件
var myHeader = {
template : `
<div>
我是header组件
<my_button />
</div>
`
}
// 创建footer组件
var myFooter = {
template : `
<div>
我是footer组件
<my_button />
</div>
`
}
// 创建footer组件
var App = {
template : `
<div>
<my_header />
我是子组件<my_button />
<my_footer />
</div>
`,
components : {
my_header : myHeader,
my_footer : myFooter,
}
}
new Vue({
el : '#app',
template : `
<div>
<h1>我是父组件</h1>
<my_button />
<hr>
<app />
</div>
`,
components : {
app : App,
}
})
</script>
附加功能:过滤器
- filter(全局)||filters(组件内)
- 将数据进行添油加醋的操作
- 过滤器分为两种
- 组件内的过滤器(组件内有效)
- 全局过滤器(所有组件共享)
- 先注册,后使用
- 注册
- 组件内注册需要添加属性
filters : {过滤器名 : function(){代码行;}}
最终方法内通过return产出最终的数据 - 注册全局过滤器的API:
Vue.filter(过滤器名 , function(){代码行;})
最终也是方法内通过return产出最终的数据
- 组件内注册需要添加属性
- 使用方式是
{{ 原有数据 | 过滤器名}}
要注意下v-text中用$options.filters.过滤器名(原有数据)
<div id="app"></div>
<script src="js/vue.min.js"></script>
<script>
Vue.filter('fil_2' , function(value) {
return '这是用v-text插件显示的value反转后的值(全局过滤器):' + value.split('').reverse().join(',');
})
new Vue({
el : '#app',
template : `
<div>
<input type = 'text' v-model = "myValue" />
<br />
{{myValue | fil_1('这是用差值表达式显示的value反转后的值:')}}
<p v-text = $options.filters.fil_2(myValue)></p>
</div>
`,
data() {
return {
myValue : '这是Value的值',
}
},
filters : {
fil_1 : function(value, str) {
return str + value.split('').reverse().join('');
},
}
})
</script>
附加功能:监视改动
- watch 监视单个数据
- 因为监视的是对象的地址,所以监视分为浅度监视(数据类型不是对象和列表)和深度监视(数据类型是对象和列表)
- 浅度监视使用方法:给对象添加watch的属性,属性的值为一个对象类型,该对象类型的键为data属性里数据的名称,值为函数
watch : {数据名称 : function(newValue, oldValue){代码行;}}
(该函数的两个参数第一个是新值,第二个参数是旧值) - 深度监视使用方法:给对象添加watch的属性,属性的值为一个对象类型,该对象类型的键为data属性里数据的名称,值为一个对象类型,其中有两个属性(deep和handler),deep用来控制是否深度监视,handler是用来写入方法。
watch : {数据名称 : {deep : true, handler : function(newValue, oldValue){代码行;}}}
(因为监视还是监视的对象的地址,又因为该函数的两个参数的数据类型是对象或者列表,地址不会更改,所以连个参数的访问地址都是一样的,都是新的值)
- cumputed 监视多个数据
- computed : {监视的业务名 : function(){代码行;}}最终方法内通过return显示一些内容
- 使用方法:
{{计算属性的名称}}
- 使用方法:
- computed : {监视的业务名 : function(){代码行;}}最终方法内通过return显示一些内容
<div id="app"></div>
<script src="js/vue.min.js"></script>
<script>
new Vue({
el : '#app',
template : `
<div>
<input type = 'text' v-model = 'myValue1' />
{{myValue1}}
<br />
<input type = 'text' v-model = 'myValue2[0].name' />
{{myValue2[0].name}}
<hr />
<input type = 'number' v-model = n_1 />
+
<input type = 'number' v-model = n_2 />
-
<input type = 'number' v-model = n_3 />
={{result}}
</div>
`,
data : {
myValue1 : '请输入xxxx',
myValue2 : [{name : '改变原来的值'}],
n_1 : 0,
n_2 : 0,
n_3 : 0,
},
watch: {
myValue1 : function(newValue, oldValue) {
console.log(oldValue);
if (newValue == 'xxxx') {
alert('让你输你就输,让你吃屎呢')
}
},
myValue2 : {
deep : true,
handler : function(newValue, oldValue) {
alert('改变成功!!原来的值为:' + e[0].name)
}
}
},
computed: {
result : function(e) {
return this.n_1-0 + (this.n_2-0) - this.n_3;
}
},
})
</script>
内置组件:slot
- 用来将DOM元素的传递,其中被slot组件留下的位置,可以在用该DOM时放入你想放的数据
- 留坑方法:
- 正常留坑:
<slot></slot>
- 具名留坑:
<slot name = '名字'></slot>
- 正常留坑:
- 使用方法:
- 正常使用:
<子组件名>DOM</子组件名>
- 具名使用:
<子组件名 slot = "名字">DOM</子组件名>
- 正常使用:
- slot是动态的DOM,props是动态的数据
<style>
li {
list-style: none;
width: 33%;
height: 200px;
background-color: brown;
float: left;
border: 1px black solid;
}
</style>
<div id="app"></div>
<script src="js/vue.min.js"></script>
<script>
var myLi1 = {
template : `
<li>
<h5>第一个子组件DOM</h5>
</li>
`,
}
var myLi2 = {
template : `
<li>
<slot></slot>
</li>
`,
}
var mySlot = {
template : `
<div>
<p>我是第一个坑:</p>
<slot name = 'one'></slot>
<hr />
<p>我是第二个坑:</p>
<slot name = 'two'></slot>
</div>
`,
}
new Vue({
el : '#app',
template : `
<div>
<ul>
<my_li1><h1>1</h1></my_li1>
<my_li1><button>2</button></my_li1>
<my_li1>
<bold>3</bold><br />
<bold>33</bold><br />
<bold>333</bold><br />
<bold>3333</bold><br />
</my_li1>
<my_li2><h1>1</h1></my_li2>
<my_li2><button>2</button></my_li2>
<my_li2>
<bold>3</bold><br />
<bold>33</bold><br />
<bold>333</bold><br />
<bold>3333</bold><br />
</my_li2>
</ul>
<my_slot>
<h1 slot = 'two'>我是第二个坑的内容</h1>
<h1 slot = 'one'>我是第一个坑的内容</h1>
</myslot>
</div>
`,
components : {
my_li1 : myLi1,
my_li2 : myLi2,
my_slot : mySlot,
},
})
</script>
生命周期钩子
-
beforeCreate 组件创建之前
-
created 组件创建之后
- 使用该组件,就会触发以上的created和beforeCreate事件函数(钩子函数),created中可以操作数据,并且可以实现vue->页面的影响,应用:发起ajax请求
-
beforeMount vue起作用,装载数据到DOM之前
-
mounted vue起作用,装载数据到DOM之后
- beforeMount vue启动前的DOM
- mount vue启动后的DOM
-
beforeUpdate 基于数据改变,影响页面,改变前
-
updated 基于数据改变,影响页面,改变后
- 以上两个是当有更改数据才会触发
- 应用:beforeUpdate 可以获取原DOM;updated可以获取新的DOM
-
beforeDestroy 对应父组件v-if false 就销毁当前组件,销毁之前
-
destroyed 对应父组件v-if false 就销毁当前组件,销毁之后
- 应用:最终都是做一些其他功能的释放,比如:保存localStorage
-
activated 组件被激活了
-
deactivated 组件被停用了
- 不能够频繁的创建和销毁组件,需要用
<keep-alive></keep-alive>
内置组件包裹,通过在keep-alive内置组件里使用v-if就相当于是组件的激活和停用
- 不能够频繁的创建和销毁组件,需要用
<div id="app"></div>
<script src="js/vue.min.js"></script>
<script>
var App = {
template : `
<div>
<input type = 'text' v-model = 'myValue' />
<button @click = 'myValue = myValue + 1'>加1</button>
<hr />
<h1>{{myValue}}</h1>
</div>
`,
data() {
return {
myValue : 'xxx',
}
},
beforeUpdate() {
console.log('子组件,beforeUpdate');
},
updated() {
console.log('子组件,updated');
},
beforeDestroy() {
console.log('子组件,beforeDestroy');
},
destroyed() {
console.log('子组件,destroyed');
},
activated() {
console.log('子组件,activated');
},
deactivated() {
console.log('子组件,deactivated');
},
}
new Vue({
el : '#app',
template : `
<div>
<keep-alive>
<app v-if = 'isExist'></app>
</keep-alive>
<button @click = 'isExist = !isExist'>点击决定是否显示内容</button>
</div>
`,
components : {
app : App,
},
data : {
isExist : true,
},
beforeCreate : function() {
console.log('父组件,beforeCreate');
// console.log(document.body.innerHTML);
},
created : function() {
console.log('父组件,created');
// console.log(document.body.innerHTML);
},
beforeMount : function() {
console.log('父组件,beforeMount');
// console.log(document.body.innerHTML);
},
mounted : function() {
console.log('父组件,mounted');
// console.log(document.body.innerHTML);
},
beforeUpdate() {
console.log('父组件,beforeUpdate');
},
updated() {
console.log('父组件,updated');
},
activated() {
console.log('父组件,activated');
},
deactivated() {
console.log('父组件,deactivated');
},
beforeDestroy() {
console.log('父组件,beforeDestroy');
},
destroyed() {
console.log('父组件,destroyed');
},
})
</script>
- ajax异步传输,axios是基于promise的,还有vue-resource