Vue学习笔记2—Vue基础
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 : `
`
})
// 创建header组件
var myHeader = {
template : `
我是header组件
我是父组件
附加功能：过滤器
- 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 : `
{{myValue | fil_1('这是用差值表达式显示的value反转后的值：')}}
`,
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 : `
{{myValue1}}
{{myValue2[0].name}}
+
-
={{result}}
`,
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时放入你想放的数据
- 留坑方法:
- 正常留坑：
- 具名留坑：
- 正常留坑：
- 使用方法：
- 正常使用：
<子组件名>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 : `
第一个子组件DOM
`,
}
var myLi2 = {
template : `
`,
}
var mySlot = {
template : `
我是第一个坑：
我是第二个坑：
1
3
33
333
3333
1
3
33
333
3333
我是第二个坑的内容
我是第一个坑的内容
`,
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 组件被停用了
- 不能够频繁的创建和销毁组件，需要用
- 不能够频繁的创建和销毁组件，需要用
<div id="app">div>
<script src="js/vue.min.js">script>
<script>
var App = {
template : `
{{myValue}}
`,
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 : `
`,
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