Vue 起步（一）
【摘要】 Vue 起步
Vue 作为MVVM框架，极大的减少了 对 dom 元素的操作。
一、数据的双向绑定，2s之后hello vue 变为 bye vue
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <t...
Vue 起步
Vue 作为MVVM框架，极大的减少了 对 dom 元素的操作。
一、数据的双向绑定，2s之后hello vue 变为 bye vue
-
<!DOCTYPE html>
-
<html>
-
<head>
-
<meta charset="utf-8" />
-
<title></title>
-
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
-
</head>
-
<body>
-
<div id="app">{{message}}</div>
-
<script type="text/javascript">
-
var app = new Vue({
-
el: '#app',
-
data: {
-
message: 'hello Vue'
-
}
-
});
-
setTimeout(function(){
-
app.$data.message='bye world';
-
},2000)
-
</script>
-
</body>
-
</html>
二、利用jquery 实现传统的 todolist demo
-
<!DOCTYPE html>
-
<html>
-
<head>
-
<meta charset="UTF-8">
-
<title>todolist jquery</title>
-
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
-
</head>
-
<body>
-
<div>
-
<input id="input" type="text" />
-
<button id="btn">提交</button>
-
<ul id="list"></ul>
-
</div>
-
<script>
-
//m v p 设计模式，很多时候都是在操作dom，面向dom开发
-
function Page() {
-
}
-
$.extend(Page.prototype, {
-
init: function() {
-
this.bindEvents();
-
},
-
bindEvents: function() {
-
var btn = $("#btn");
-
btn.on("click", $.proxy(this.handleBtnClick, this))
-
},
-
handleBtnClick: function() {
-
//alert('123');
-
//获取input输入框的值
-
var input = $("#input");
-
var inputValue = input.val();
-
//获取ul元素
-
var ul = $("#list");
-
//构造li ，将li添加到ul中国
-
ul.append("<li>" + inputValue + "</li>");
-
input.val('');
-
}
-
});
-
var page = new Page();
-
page.init();
-
</script>
-
</body>
-
-
</html>
三、使用vue 实现 todolist demo
-
<!DOCTYPE html>
-
<html>
-
-
<head>
-
<meta charset="UTF-8">
-
<title>TodoList</title>
-
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
-
</head>
-
-
<body>
-
-
<div id="app">
-
<!-- v-model 双向绑定 -->
-
<input type="text" v-model="inputValue" />
-
<!--
-
作者：offline
-
时间：2019-03-22
-
描述：v-on 绑定一个事件
-
-->
-
<button v-on:click="handleBtnClick">提交</button>
-
-
<ul>
-
<!-- <li>第一课的内容</li>
-
<li>第二课的内容</li>-->
-
<!--<li v-for="item in list">{{item}}</li>-->
-
-
<!--1.父组件将获取到的item和index通过v-bind的形式传递给子组件-->
-
<!--5.父组件 通过@delete监听子组件的点击时间，监听到了子组件的点击事件之后调用父组件的
-
handleItemDelete函数
-
-->
-
<todo-item v-bind:content="item" v-bind:index="index" v-for="(item,index) in list" @delete="handleItemDelete">
-
-
</todo-item>
-
</ul>
-
-
</div>
-
-
<script type="text/javascript">
-
//定义全局组件
-
// Vue.component("TodoItem",{
-
// props:['content'],
-
// template:"<li>{{content}}</li>"
-
// });
-
-
//局部组件
-
var TodoItem = {
-
//2.子组件通过props接收到父组件传来的item和index参数
-
props: ['content', 'index'],
-
//3.当子组件被点击的时候，触发子组件的点击事件函数
-
template: "<li @click='handleItemClick'>{{content}}</li>",
-
methods: {
-
handleItemClick: function() {
-
//4.子组件触发点击事件之后，通过emit函数通知父组件，并回传list数组的下标
-
this.$emit("delete", this.index);
-
}
-
}
-
};
-
-
//mvvm 框架 数据和视图双向绑定，面向数据开发
-
var app = new Vue({
-
el: '#app',
-
data: {
-
list: ['第一课的内容', '第二课的内容', '3333'],
-
inputValue: ''
-
},
-
methods: {
-
handleBtnClick: function() {
-
if(this.inputValue) {
-
this.list.push(this.inputValue);
-
this.inputValue = '';
-
}
-
},
-
//6.父组件拿到子组件回传的index下标进行移除操作
-
handleItemDelete: function(index) {
-
this.list.splice(index, 1);
-
}
-
},
-
//上面定义的局部组件需要在此将它加入到vue组件中
-
components: {
-
TodoItem: TodoItem
-
}
-
});
-
</script>
-
</body>
-
</html>
vue的每个组件其实也是vue的实例，vue的实例有很多实例属性和实例方法，在调用的时候加上$符号来区别用户自定义的属性和方法。
三、vue 的 生命周期钩子
-
<!DOCTYPE html>
-
<html>
-
<head>
-
<meta charset="UTF-8">
-
<title>vue生命周期钩子</title>
-
-
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
-
-
</head>
-
<body>
-
<div id="app">
-
-
</div>
-
-
<script type="text/javascript">
-
//生命周期函数就是vue实例在某一个时间节点自动执行的函数,并且vue的
-
//生命周期函数并不放在vue实例的methods对象中。
-
var app = new Vue({
-
el:"#app",
-
beforeCreate: function(){
-
console.log(" 基础的初始化 ");
-
},
-
created: function(){
-
console.log("created");
-
},
-
beforeMount: function(){
-
console.log("beforeMount");
-
},
-
mounted: function(){
-
console.log("mounted")
-
},
-
// 调用app.$destroy()方法时函数被调用
-
beforeDestroy: function(){
-
console.log("beforeDestroy");
-
},
-
destroyed: function(){
-
console.log("destroyed");
-
},
-
//数据被修改的时候被调用
-
beforeUpdate: function(){
-
console.log("beforeUpdate");
-
},
-
updated:function () {
-
console.log("updated");
-
},
-
template:"<div>{{test}}</div>",
-
data:{
-
test: "hellllllllllll......"
-
}
-
});
-
-
setTimeout(function() {
-
app.$data.test = 'worlddddddddd.....';
-
},2000);
-
// setInterval(function(){
-
// alert('123');
-
// },5000)
-
</script>
-
</body>
-
</html>
四、vue的 v-text 、v-html、计算属性
-
<!DOCTYPE html>
-
<html>
-
-
<head>
-
<meta charset="UTF-8">
-
<title>v-text，v-html，计算属性</title>
-
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
-
-
</head>
-
-
<body>
-
<div id="app">
-
<div id="a">{{test+' lee'}}</div>
-
<div id="b" v-text="test + ' lee' "></div>
-
<div id="c" v-html="test +' lee'"></div>
-
<div v-text="firstName"></div>
-
<div v-html="lastName"></div>
-
<div>计算属性：{{fullName}}</div>
-
<!--<div>methods方法计算属性：{{fullName()}}</div>-->
-
</div>
-
<script type="text/javascript">
-
var app = new Vue({
-
el: "#app",
-
data: {
-
test: '<h1>dzx</h1>',
-
firstName: "d",
-
lastName: "zx",
-
fullName: "dzx"
-
},
-
//计算属性，解决属性冗余，
-
computed: {
-
fullName: function() {
-
console.log("计算 了一次");
-
//计算属性具有缓存的作用，当计算的值被修改的时候才会重新计算。
-
return this.firstName + " " + this.lastName;
-
}
-
//计算属性的get set用法
-
// fullName:{
-
// get:function(){
-
// return this.firstName+" "+this.lastName;
-
// },
-
// set: function(value){
-
// var arr = value.split(" ");
-
// this.firstName = arr[0];
-
// this.lastName = arr[1];
-
// }
-
// }
-
},
-
//普通方法
-
// methods:{
-
// fullName:function(){
-
// return this.firstName+" "+this.lastName;
-
// }
-
// },
-
-
//watch 监听 某个属性的变化，进而改变另外一个 属性的值
-
// watch:{
-
// firstName:function(){
-
// this.fullName = this.firstName+" "+this.lastName;
-
// },
-
// lastName:function(){
-
// this.fullName = this.firstName+" "+this.lastName;
-
// }
-
// }
-
});
-
</script>
-
</body>
-
-
</html>
五、样式绑定
-
<!DOCTYPE html>
-
<html>
-
<head>
-
<meta charset="UTF-8">
-
<title>样式绑定</title>
-
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
-
<style type="text/css">
-
-
.activated{
-
color: red;
-
}
-
-
.activatedOne{
-
font-size: 20px;
-
}
-
-
</style>
-
</head>
-
<body>
-
<div id="app">
-
<div @click="handleDivClick" :class="{activated: isActivated}">
-
{{msg}}
-
</div>
-
</div>
-
-
-
-
<script type="text/javascript">
-
var app = new Vue({
-
el: "#app",
-
data:{
-
msg:"hello world",
-
isActivated: false
-
},
-
methods:{
-
handleDivClick: function () {
-
this.isActivated = !this.isActivated;
-
}
-
}
-
-
});
-
</script>
-
-
-
<div id="app1">
-
<div @click="handleDivClick" :class="[activated,activatedOne]">
-
{{msg}}
-
</div>
-
</div>
-
-
<script type="text/javascript">
-
-
var app1 = new Vue({
-
el:"#app1",
-
data:{
-
msg:"hello world",
-
activated:"",
-
activatedOne: "",
-
},
-
methods:{
-
handleDivClick: function () {
-
this.activated = this.activated ==='activated'?'':'activated';
-
this.activatedOne = this.activatedOne === 'activatedOne'?'':'activatedOne';
-
}
-
}
-
-
-
})
-
-
-
</script>
-
-
<div id="app2">
-
<div :style="[styleObj,{fontSize:'20px'}]" @click="handleDivClick">
-
{{msg}}
-
</div>
-
</div>
-
-
<script type="text/javascript">
-
-
var app2 = new Vue({
-
el:"#app2",
-
data:{
-
msg:"hello world",
-
activated:"",
-
activatedOne: "",
-
styleObj:{
-
color: "blue"
-
}
-
},
-
methods:{
-
handleDivClick:function () {
-
this.styleObj.color = this.styleObj.color==="blue"?"red":"blue";
-
}
-
}
-
})
-
-
-
</script>
-
</body>
-
</html>
六、v-if 和 v-show 的使用
-
<!DOCTYPE html>
-
<html>
-
<head>
-
<meta charset="UTF-8">
-
<title>v-if,v-show</title>
-
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
-
</head>
-
<body>
-
-
<div id="app">
-
<!--v-if 相当于 是对 dom元素的 删除 和 添加-->
-
<div v-if="show">hello world</div>
-
-
<!--
-
作者：offline
-
时间：2019-03-24
-
描述：v-if v-else-if v-else 在使用的时候一定要放在一起，中间不能有其他的元素
-
隔断，否则浏览器编译报错
-
-->
-
<div v-if="x === 'a'">this is a </div>
-
<div v-else-if="x === 'b'">this is b</div>
-
<div v-else>this is other</div>
-
-
<!--
-
作者：offline
-
时间：2019-03-24
-
描述：给input 输入框添加一个唯一标识key，这样可以防止在改变show的时候
-
将清空之前输入框中的值
-
-->
-
<div v-if="show">
-
用户名：<input type="text" key="username"/>
-
</div>
-
<div v-else>
-
邮箱： <input type="text" key="password"/>
-
</div>
-
<!--
-
作者：offline
-
时间：2019-03-24
-
描述：v-show则是没有真正的将dom元素进行删除添加操作，仅仅只是对style样式的
-
display属性的改变。来让dom元素实现显示和隐藏。因此在 频繁显示和隐藏的功能上
-
我们更加推荐使用v-show
-
-->
-
<div v-show="show">hello world!!</div>
-
-
</div>
-
-
<script type="text/javascript">
-
-
var vm = new Vue({
-
el:"#app",
-
data:{
-
show: false,
-
x: "a"
-
}
-
});
-
-
-
</script>
-
-
</body>
-
</html>
七、v-for 的用法
-
<!DOCTYPE html>
-
<html>
-
-
<head>
-
<meta charset="UTF-8">
-
<title>v-for</title>
-
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
-
-
</head>
-
-
<body>
-
-
<div id="app">
-
<!--数组的操作 push、 pop、 shift、 unshift、 splice、 sort、 reverse-->
-
<!--当我们使用app.list[3] = {id:"004",title:"redis"} 向数组中添加元素的时候
-
发现页面上面不会动态 的更新，我们需要用 上面的数组操作函数才行。
-
app.list.splice(1,1,{id:"004",title:"redis"})
-
或者我们直接更改整个 list的引用对象即可。
-
-->
-
<template v-for="(item,index) of list" :key="item.id">
-
<div>
-
{{item.title}}---{{index}}
-
</div>
-
<span>
-
{{item.title}}
-
</span>
-
</template>
-
-
<!--
-
作者：offline
-
时间：2019-03-24
-
描述：v-for 也可以用来循环遍历对象
-
当我们直接使用app.userInfo.address ="北京"时发现对象 确实
-
新增了一个address属性，但是页面上也没有动态更新显示，
-
我们可以直接更改 整个对象的引用地址。
-
app.userInfo = {
-
name:"Dell",
-
age:28,
-
gender:"male",
-
address:"北京"
-
}
-
-->
-
<div v-for="(item,key,index) of userInfo">
-
{{item}}---{{key}}---{{index}}
-
</div>
-
-
<button @click="insertAddress">给用户添加一个属性</button>
-
</div>
-
-
<script type="text/javascript">
-
var app = new Vue({
-
el: "#app",
-
data: {
-
list: [{
-
id: "001",
-
title: "hadoop"
-
},
-
{
-
id: "002",
-
title: "spark"
-
},
-
{
-
id: "003",
-
title: "flink"
-
}
-
],
-
userInfo: {
-
name: "Dell",
-
age: 28,
-
gender: "male"
-
}
-
},
-
methods:{
-
insertAddress:function(){
-
//还有一种最简单的方式就是使用 vue 的全局set 函数直接修改或添加属性到
-
//数组或者对象中
-
//vue 全局set 方法
-
Vue.set(this.userInfo,"address","北京");
-
Vue.set(this.list,"1",{id:"0020",title:"spark0"});
-
-
//vue 实例 set方法
-
this.$set(this.userInfo,"address1","湖北");
-
this.$set(this.list,"2",{id:"0030",title:"spark3"});
-
}
-
}
-
});
-
</script>
-
</body>
-
-
</html>
八、组件使用细节
-
<!DOCTYPE html>
-
<html>
-
-
<head>
-
<meta charset="UTF-8">
-
<title>组件使用细节</title>
-
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
-
-
</head>
-
-
<body>
-
-
<div id="app">
-
<table>
-
<tbody>
-
<!--<row></row>
-
<row></row>
-
<row></row>-->
-
<!--因为在tbody中必须时tr标签，浏览器才能识别
-
所以我们不能直接写成定义的row组件，需要用到is属性-->
-
<tr is="row"></tr>
-
<tr is="row"></tr>
-
<tr is="row"></tr>
-
</tbody>
-
-
</table>
-
-
</div>
-
<script type="text/javascript">
-
Vue.component("row", {
-
data: function(){
-
return {
-
content:"this is a row"
-
}
-
},
-
template: "<tr><td>{{content}}</td></tr>"
-
-
});
-
-
var app = new Vue({
-
el: "#app"
-
});
-
</script>
-
-
<div id="app1">
-
<!--
-
作者：offline
-
时间：2019-03-24
-
描述：ref的用法
-
1.当ref 作用在普通标签上面的时候，
-
this.$refs.引用名称 获取到的是这个dom元素
-
2.当red作用在 vue组件上面的时候，
-
this.$refs.引用名称 获取到的是组件实例的引用对象
-
-->
-
<div ref="my" @click="clickDiv">hello my lala lala !!!</div>
-
-
<counter ref="one" @change="handleChange" ></counter>
-
<counter ref="two" @change="handleChange" ></counter>
-
<div>{{total}}</div>
-
</div>
-
-
<script type="text/javascript">
-
-
//定义一个counter子组件
-
Vue.component("counter",{
-
data: function() {
-
return {
-
number:0
-
}
-
},
-
template:"<div @click='handlerSubClick'>{{number}}</div>",
-
methods:{
-
handlerSubClick:function () {
-
this.number++;
-
this.$emit("change")
-
}
-
}
-
});
-
-
var app1 = new Vue({
-
el:"#app1",
-
data:{
-
total:0
-
},
-
methods:{
-
clickDiv: function(){
-
alert(this.$refs.my.innerHTML);
-
},
-
handleChange:function () {
-
//获取子组件的引用对象中的 number值
-
this.total = this.$refs.one.number+this.$refs.two.number;
-
}
-
}
-
});
-
</script>
-
</body>
-
</html>
九、父子组件传值
-
<!DOCTYPE html>
-
<html>
-
-
<head>
-
<meta charset="UTF-8">
-
<title>父子组件传值</title>
-
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
-
-
</head>
-
-
<body>
-
-
<div id="app">
-
<!--
-
作者：offline
-
时间：2019-03-24
-
描述：父组件通过属性的形式向子组件传值
-
，子组件通过事件通知的形式向父组件传值
-
-->
-
<counter :count="3" @change="add"></counter>
-
<counter :count="2" @change="add"></counter>
-
<div>{{total}}</div>
-
</div>
-
-
<script type="text/javascript">
-
var counter = {
-
props: ['count'],
-
data: function() {
-
return {
-
number: this.count
-
}
-
},
-
template: "<div @click='handleClick'>{{number}}</div>",
-
methods: {
-
handleClick: function() {
-
this.number += 2;
-
this.$emit("change", 2);
-
}
-
}
-
};
-
-
var app = new Vue({
-
el: "#app",
-
components: {
-
counter: counter
-
},
-
data: {
-
total: 5
-
},
-
methods: {
-
add: function(step) {
-
this.total += step;
-
}
-
}
-
});
-
</script>
-
-
</body>
-
-
</html>
十、组件参数校验与非props特性
-
<!DOCTYPE html>
-
<html>
-
-
<head>
-
<meta charset="UTF-8">
-
<title>组件参数校验与非props特性</title>
-
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
-
-
</head>
-
-
<body>
-
-
<div id="app">
-
<child content="hello world"></child>
-
</div>
-
<script type="text/javascript">
-
Vue.component("child",{
-
props:{
-
//参数校验，只接受string或者number型的值
-
content:{
-
type:String,
-
required:true,
-
default:"default value", //默认值
-
validator:function(value){ //自定义校验器
-
return value.length>5;
-
}
-
}
-
},
-
template:"<div>{{content}}</div>"
-
});
-
-
var app = new Vue({
-
el: "#app",
-
data: {
-
},
-
methods: {
-
}
-
});
-
</script>
-
</body>
-
</html>
十一、给组件绑定原生事件
-
<!DOCTYPE html>
-
<html>
-
<head>
-
<meta charset="UTF-8">
-
<title>组件参数校验与非props特性</title>
-
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
-
</head>
-
<body>
-
-
<div id="app">
-
<!--
-
作者：offline
-
时间：2019-03-24
-
描述：给组件 绑定原生事件，只需要加一个native 关键字即可
-
-->
-
<child @click.native="handleClick"></child>
-
</div>
-
<script type="text/javascript">
-
Vue.component("child", {
-
template: "<div>hello</div>"
-
});
-
-
var app = new Vue({
-
el: "#app",
-
data: {},
-
methods: {
-
handleClick: function() {
-
alert("123");
-
}
-
}
-
});
-
</script>
-
</body>
-
-
</html>
十二、 非父子组件之间的传值
-
<!DOCTYPE html>
-
<html>
-
<head>
-
<meta charset="UTF-8">
-
<title>非父子组件之间的传值（Bus总线/发布订阅/观察者模式）</title>
-
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
-
</head>
-
<body>
-
<div id="app">
-
-
<child content="Dell"></child>
-
<child content="Lee"></child>
-
</div>
-
<script type="text/javascript">
-
-
//使每个组件bus属性上面都挂载一个vue实例
-
Vue.prototype.bus = new Vue();
-
-
-
Vue.component("child", {
-
props:{
-
content:String
-
},
-
data:function(){
-
return {
-
selfContent:this.content
-
}
-
},
-
template: "<div @click='handleClick'>{{selfContent}}</div>",
-
methods:{
-
handleClick:function () {
-
//alert(this.content);
-
this.bus.$emit('change',this.selfContent);
-
}
-
},
-
mounted:function () {
-
var this_ = this;
-
this.bus.$on('change',function(msg){
-
alert(msg);
-
this_.selfContent = msg;
-
});
-
}
-
});
-
-
var app = new Vue({
-
el: "#app",
-
data: {},
-
methods: {
-
handleClick: function() {
-
alert("123");
-
}
-
}
-
});
-
</script>
-
-
-
-
</body>
-
</html>
十三、在vue中使用插槽
-
<!DOCTYPE html>
-
<html>
-
-
<head>
-
<meta charset="UTF-8">
-
<title></title>
-
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
-
-
</head>
-
-
<body>
-
-
<div id="app">
-
-
<body-content>
-
<!--
-
作者：offline
-
时间：2019-03-24
-
描述：组件中的dom元素就相当于插槽
-
-->
-
<div class="header" slot="header">header</div>
-
<div class="footer" slot="footer">footer</div>
-
</body-content>
-
-
</div>
-
-
<script type="text/javascript">
-
Vue.component("body-content", {
-
//通过slot标签就可以使用插槽，如果父组件中的插槽，指定了slot属性，这里使用的时候
-
//通过slot标签的name属性就可以选择使用插槽
-
template: `<div><slot name='header'>
-
<h1>default value</h1>
-
</slot>
-
<div class='content'>content</div>
-
<slot name='footer'></slot></div>`
-
});
-
-
var app = new Vue({
-
el: "#app"
-
-
});
-
</script>
-
-
</body>
-
-
</html>
十四、 vue中的作用域插槽
-
<!DOCTYPE html>
-
<html>
-
-
<head>
-
<meta charset="UTF-8">
-
<title>vue中的作用域插槽</title>
-
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
-
</head>
-
-
<body>
-
-
<div id="app">
-
<child>
-
<template slot-scope="props">
-
<h1>{{props.item}}</h1>
-
</template>
-
</child>
-
-
<child>
-
<template slot-scope="props">
-
<h2>{{props.item}}</h2>
-
</template>
-
</child>
-
-
<child>
-
<template slot-scope="props">
-
<h3>{{props.item}}</h3>
-
</template>
-
</child>
-
</div>
-
-
<script type="text/javascript">
-
Vue.component("child", {
-
data: function() {
-
return {
-
list: [1, 2, 3, 4]
-
}
-
},
-
template: `<div>
-
<ul>
-
<slot v-for="item of list" :item=item>
-
</ul>
-
</div>`
-
});
-
var app = new Vue({
-
el: "#app"
-
});
-
</script>
-
-
</body>
-
-
</html>
十五、动态组件与v-once指令
-
<!DOCTYPE html>
-
<html>
-
-
<head>
-
<meta charset="UTF-8">
-
<title></title>
-
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
-
</head>
-
-
<body>
-
-
<div id="app">
-
<!--
-
作者：offline
-
时间：2019-03-24
-
描述：动态组件，component 标签，type是child-one 页面上
-
就显示child-one ，是child-two就显示child-two
-
-->
-
<component :is="type"></component>
-
<!--<child-one v-if="type==='child-one'">
-
</child-one>
-
-
<child-two v-if="type==='child-two'">
-
</child-two>-->
-
-
-
<button @click="handleClick">change</button>
-
-
</div>
-
-
<script type="text/javascript">
-
Vue.component("child-one", {
-
// v-once使组件内容不变的情况下只加载一次,提高性能
-
template:"<div v-once>child-one</div>"
-
});
-
Vue.component("child-two", {
-
template:"<div v-once>child-two</div>"
-
});
-
var app = new Vue({
-
el: "#app",
-
data:{
-
type:"child-one"
-
},
-
methods:{
-
handleClick:function () {
-
this.type= this.type==='child-one'?'child-two':'child-one';
-
}
-
}
-
});
-
</script>
-
-
</body>
-
-
</html>
文章来源: blog.csdn.net，作者：血煞风雨城2018，版权归原作者所有，如需转载，请联系作者。
原文链接：blog.csdn.net/qq_31905135/article/details/88757554
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）