内嵌模板
<body>
<div id="app">
<my-com></my-com>
<!-- 通过inline-template属性可以临时修改组件的模板,替换原有模板 -->
<my-com inline-template>
<div>
这是临时修改的模板
</div>
</my-com>
<!-- 内嵌模板是临时的,不会对原始模板造成影响 -->
<my-com></my-com>
<my-com></my-com>
</div>
</body>
<!-- 当一个组件模板在使用时,不满足渲染样式的需求 -->
<!-- 再写一个新的模板有点费时费力 -->
<!-- 此时可以临时修改组件模板,达到渲染需求 -->
<script type="text/html" id="my-tem">
<div>
<p>这是原来的子组件</p>
</div>
</script>
<script>
Vue.component('my-com', {
template: '#my-tem',
props: [],
computed: {
},
data() {
return {
}
}
})
var app = new Vue({
el: "#app",
data: {
}
})
</script>
数据异步更新
<body>
<div id="app">
{{people.name}}
</div>
</body>
<script>
var app = new Vue({
el: "#app",
data: {
people: {
name: "张三"
}
}
})
console.log(app.$el.innerText);
//数据改变页面刷新一般是16.7毫秒
// app.people.name = "李四";
// console.log(app.$el.innerText);
// //数据改变页面刷新一般是16.7毫秒
// app.people.name = "王五";
// console.log(app.$el.innerText);
// // 最终就是王五 打印张三 张三 张三
//数据改变页面刷新一般是16.7毫秒
app.people.name = "李四";
//下一帧刷新之后再执行操作
Vue.nextTick(function () {
console.log(app.$el.innerText);
})
//数据改变页面刷新一般是16.7毫秒
app.people.name = "王五";
//下一帧刷新之后再执行操作
Vue.nextTick(function () {
console.log(app.$el.innerText);
})
// 最终就是王五 打印张三 王五 王五
</script>
重用机制
<body>
<div id="app">
<template v-if="bool">
<label for="">
账号:
</label><input type="text"></input>
<label for="">
密码:
</label><input type="password"></input>
</template>
<template v-else>
<label for="">
手机号:
</label><input type="text"></input>
<label for="">
验证码:
</label><input type="text"></input>
</template>
<!-- v-if判断会造成标签的销毁和重建,如果input变迁被销毁重建,那么输入的信息 -->
<!-- 会丢失,但是实际情况是,数据被保留下来了,原因是由于vue中存在标签重用机制 -->
<!-- 惰性机制 一看切换之后 的标签一样 就不会销毁了 -->
<button @click="bool = !bool">切换登录方式</button>
<br><br><br>
<!-- 避免重用机制 -->
<template v-if="bool">
<label for="">
账号:
</label><input type="text" key="name"></input>
<label for="">
密码:
</label><input type="password" key="pass"></input>
</template>
<template v-else>
<label for="">
手机号:
</label><input type="text" key="name"></input>
<label for="">
验证码:
</label><input type="text" key="pass1"></input>
</template>
<!-- 切换之后 key值一样 依然惰性 依然重用 -->
<!-- key值不一样时 销毁数据 清空 -->
<button @click="bool = !bool">切换登录方式</button>
</div>
<!-- v-for循环时,为了避免循环创建的标签启用重用机制造成数据干涉 -->
<!-- 需要在循环时添加key属性并绑定不同的值,一般为索引值 -->
</body>
<script>
var app = new Vue({
el: '#app',
data: {
bool: true
}
})
</script>
