在main.js中，创建Vue实例，Vue实例把需要渲染的内容，加载到html的节点中。
import Vue from "vue";
import myDemo from "@/myDemo.vue";
new Vue({
el:'#app',
render(h){
return h(myDemo);
}
});
一个 Vue 应用由一个通过 new Vue 创建的根 Vue 实例，以及可选的嵌套的、可复用的组件树组成。当创建一个 Vue 实例时，你可以传入一个选项对象。Vue官方文档选项列表，具体如下：
- 数据: data、props、propsData、 computed、methods、 watch
- DOM: el、 template、 render、 renderError
- 生命周期钩子: beforeCreate、created、beforeMount、 mounted、 beforeUpdate、updatedactivated、deactivated、 beforeDestroy、 destroyederrorCaptured
- 资源: directives、filters、 components
- 组合:parent、 mixins、extends、 provide、 inject
选项详情
- el 挂载点，与$mount有替换关系
new Vue({
el:'#app',
render(h){
return h(myDemo);
}
});
- $mount, 可以代替el
const vm = new Vue({
render(h){
return h(myDemo);
}
});
vm.$mount('#app');
- data，内部数据，支持对象和函数，优先函数 // 使用完整版Vue,index.html
……
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
……
// 单个main.js文件实现功能
// 使用全局的Vue
const Vue = window.Vue;
Vue.config.productionTip = false; // 开发环境
new Vue({
/*
// data 作为一个对象
data:{
n:0,
},
*/
/*
// data 作为一个函数
data: function (){
return {
n:1,
}
},
*/
// data 作为一个函数的间写
data(){
return {
n:100,
}
},
template:`
<div class="red">
{{n}}
<button @click="add">+1</button>
</div>
`,
methods:{
add(){
this.n += 1;
}
}
}).$mount('#app');
- data:优先使用函数，为什么?
Vue组件、Vue对象中的data，优先使用函数。尤其是Vue组件作为单个文件，必须使用函数。
Vue作为一个组件，会被多次用到，实际上就是一个被多处使用的对象。Vue对象中的data如果是对象，那么，所有的vue对象的data就指向同一个内存空间，数据就会混乱；如果Vue对象中的data是函数，那么，每一次使用Vue对象中的data时，就必须执行函数，
- method 事件处理函数或者普通函数
const Vue = window.Vue;
Vue.config.productionTip = false; // 开发环境
new Vue({
data(){
return {
n:100,
array: [1,2,3,4,5,6,7,8],
}
},
template:`
<div class="red">
{{n}}   <button @click="add">+1</button>
<hr>
{{filter(array)}}
</div>
`,
methods:{
// 事件处理函数
add(){
this.n += 1;
},
// 作为普通函数
filter(arr){
return arr.filter(i => i%2===0);
}
}
}).$mount('#app');
method每次渲染都会执行；
- components 组件
1，创建Vue文件如 my_demo.vue（注意，vue组件名一般是小写字母），然后引用；
import myDemo from "@/my_demo.vue"; // 引用Vue组件
const Vue = window.Vue;
Vue.config.productionTip = false; // 开发环境
// Vue实例
new Vue({
components:{
Demo: myDemo, // 使用Vue组件
},
data(){
return {
n:100,
}
},
template:`
<div class="red">
{{n}}
<hr>
<Demo/>
</div>
`,
}).$mount('#app');
其中有一部分还可以缩写：
components:{
MyDemo: MyDemo,
},
可以缩写为：
components:{ MyDemo },
2，直接创建Vue组件，这个Demo2组件不需要在Vue实例中注明，直接使用；这个组件接收的参数和new Vue（）的构造选项一模一样
Vue.component('MyDemo2', {
template:`
<div>MyDemo2</div>>
`});
// Vue实例
new Vue({
data(){
return {
n:100,
}
},
template:`
<div class="red">
{{n}}
<hr/>
<MyDemo2/>
</div>
`,
}).$mount('#app');
3，直接在实例中定义Vue组件，Demo3就是直接在实例中定义的Vue组件
new Vue({
components:{
Demo3: {
data(){
return {n:108}
},
template: `
<div>MyDemo3's n = {{n}}</div>>
`,
}
},
template:`
<div class="red">
<hr/>
<Demo3/>
</div>
`,
}).$mount('#app');
- 四个钩子，created,mounted,updated,destroyed
export default {
name: "MyDemo",
data(){
return {
n:0,
}
},
mounted() {
console.log("实例已经出现在页面中");
},
created() {
console.log("实例出现在内存中之后，出现在页面之前调用");
},
updated() {
console.log("实例更新");
console.log("实例更新后可以得到最新的数据，this.n = " + this.n);
},
destroyed() {
console.log("实例销毁，子组件");
},
methods:{
add(){
this.n += 1;
}
}
}
- props，外部属性 外部文件，传入数据到MyDemo组件，注意其中数值n和方法add的传法，前面有冒号
const Vue = window.Vue;
Vue.config.productionTip = false; // 开发环境
import MyDemo from "@/my_demo.vue"; // 引用Vue组件
new Vue({
components: {MyDemo},
data() {
return {
n:28,
visible: true,
}
},
template: `
<div class="red">
<button @click="toggle">toggle</button>
<hr>
<MyDemo v-if="visible === true" message="hello,props" :n="n" :add="add"/>
</div>
`,
methods: {
toggle(){
this.visible = !this.visible;
},
add(){
console.log("add()");
this.n += 3;
}
}
}).$mount('#app');
MyDemo组件，接受外部传入的数据
<template>
<div class="red">
外部传入的数据 n = {{n}}
<hr>
外部传入的数据 message = {{this.message}}
<tr/>
<button @click="add">+1</button>
</div>
</template>
<script>
export default {
name: "MyDemo",
props: ['message','n', 'add'], // 从外部接受message，绑定到this上
}
</script>
