vue基础
<h2>简单粗暴，一个demo搞定vue基础 <sub>(标题逐渐UC化)</sub></h2>
<pre><code><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* 防闪 */
[v-clock] {
display: none;
}
#app {
border: 1px solid red;
}
.father {
color: red;
}
.son {
color: blue;
}
.sonBox {
border: 1px solid blue;
}
</style>
</head>
<body>
<div id="app" v-clock>
<div>{{str}}</div>
<div>绑定属性</div>
<div>1.method方法调用:{{meth(a)}}</div>
<div>2.computed方法名计算:{{com}}</div>
<div>3.filters参数串联过滤器方法名:{{c|fil|fil2}}</div>
<global draggable="true"></global>
<!-- 驼峰改蛇形 -->
<my-tag class="sonBox" :Str="fatherStr" @changedata="changedata" :Arr="fatherArr" :Obj="fatherObj"></my-tag>
<em>父传子：子组件的props相当于父组件的data，声明变量来接收来自父组件的参数，只读=> :son="father"</em>
<div>10.这是来自子组件的字符串：<span class="son" @str="str(e)">{{}}</span></div>
</div>
<hr />
以下是app2
<div id="app2">
<global></global>
<!-- diy需要注册，否则无效 -->
<!-- <diy></diy> -->
</div>
</body>
</html>
<script src="./node_modules/vue/dist/vue.min.js"></script>
<script>
Vue.component('global', {
template: `<div>4.全局template:不用注册，直接挂载到Vue上</div>`
})
let myTag = {
template: `<div><div>5.<span>局部template：</span><a href='http://www.baidu.com'>,需要注册，多个标签用一个div装起来</a></div>
<div>6.这是父组件传进来的字符串:<span class="father">{{Str}}</span></div>
<div>7.这是父组件传进来的数组:[<span class="father" v-for="item in Arr" class="father">{{item}},</span>]</div>
<div>8.这是父组件传进来的对象：<ul class="father"><li v-for="item in Obj" :key="item.id">{{item.id}}--{{item.name}}</li></ul>
<div>9.这是子组件的按钮：<button class="son" @click="changeBtn()">{{sonBtn}}</button></div>
</div>`,
props: ['Str', 'Arr', 'Obj'],
// 子组件的data必须是一个返回装数据的对象的函数
data() {
return {
sonBtn: 1,
changedata() {
let parm = {
str: '自定义事件改变父组件字符串',
// arr:['木','火','土','金','水'],
obj: [
{ id: '子', name: '辰' },
{ id: '丑', name: '巳' },
{ id: '寅', name: '午' },
{ id: '卯', name: '未' },
]
}
this.$emit('changedata', parm)
}
}
},
methods: {
// 通过事件方法改变父组件数据
changeBtn() {
this.changedata()// 共存时只自定义事件生效
this.$props.Str = '通过事件方法改变父组件数据'
this.$props.Arr = [1, 2, 3, 4]
this.$props.Obj = [
{ id: 1, name: '甲' },
{ id: 2, name: '乙' },
{ id: 3, name: '丙' },
{ id: 4, name: '丁' },
]
console.log(this.$props)
this.sonBtn++
}
}
}
new Vue({
el: "#app",
data: {
str: '双花括号语法',
a: '1',
b: '1',
c: 1,
fatherStr: '来自父组件的字符串',
fatherArr: ['来', '自', '父', '亲'],
fatherObj: [
{ id: 1, name: '伯' },
{ id: 2, name: '仲' },
{ id: 3, name: '叔' },
{ id: 4, name: '季' },
]
},
components: { myTag },
methods: {
meth(a) {
return a + 1
},
changedata(data) {
console.log(data)
this.fatherStr = data.str
// this.fatherArr = data.arr
this.fatherObj = data.obj
}
},
computed: {
com() {
return this.b
}
},
filters: {
fil(c) {
return c + 1
},
fil2(c) {
return c + 'hhh'
}
},
// 生命周期
beforeCreate() {
console.log("创建前：");
console.log(this.$el);
console.log(this.$data);
},
created() {
console.log("创建完成：");
console.log(this.$el);
console.log(this.$data);
},
beforeMount() {
console.log("挂载前：");
console.log(this.$el);
console.log(this.$data);
},
mounted() {
console.log("挂载完成：");
console.log(this.$el);
console.log(this.$data);
},
beforeUpdate() {
console.log('=即将更新渲染=');
//let name = this.$refs.app.innerHTML;
console.log('name:' + name);
},
updated() {
console.log('==更新成功==');
//let name = this.$refs.app.innerHTML;
console.log('name:' + name);
},
beforeDestory() {
console.log("销毁前：");
},
destoryed() {
console.log("销毁完成：");
}
})
new Vue({
el: '#app2',
// components:{diy:myTag},//diy注册，否则挂载无效
})
</script></code></pre>