三、Vue核心概念
这一章对Vue基础内容做了简单的概述，我的下列博客中，详细介绍了Vue基础语法
vue实例
通过new Vue({...})创建的对象
配置对象中的部分内容会被提取到vue实例中：
- data
- props
- methods
- computed
挂载
让vue实例控制网页中某个区域的过程，称之为挂载
挂载的方式：
- 通过
el:"css选择器"进行配置 - 通过
vue实例.$mount("css选择器")进行配置
模板
被vue实例控制的页面片段
模板的作用是什么？
为了提高渲染效率，vue会把模板编译成为虚拟DOM树（VNode），然后再生成真实的DOM
模板书写到哪？
- 在挂在的元素内部直接书写
- 在
template配置中书写 - 在
render配置中用函数创建
模板中写什么？
- 静态内容
- 插值：
{{JS表达式}}，mustache语法 - 指令
v-html：绑定元素的innerHTMLv-bind:属性名：绑定属性v-on:事件名：绑定事件v-if：判断元素是否需要渲染v-show：判断元素是否应该显示v-for：用于循环生成元素v-bind:key：用于帮助在重新渲染时元素的比对，通常和v-for配合使用，以提高渲染效率v-model：语法糖，用于实现双向绑定，实际上，是自动绑定了value属性值，和注册了input事件
模板中的代码环境
模板中所有的JS代码，它的环境均为
vue实例，例如{{title}}，得到的结果相当于是vue实例.title
配置对象
data：数据template：字符串，配置模板el：配置挂载的区域methods：配置方法computed：配置计算属性
最佳实践
<body>
<div id="app">
<input type="text" v-model="newProduct.name">
<input type="text" v-model="newProduct.stock">
<button @click="addProduct()">点击</button>
<br>
<h2 v-show="products.length===0">没有商品</h2>
<ul>
<li v-for="(item,i) in products">
{{item.name}}: {{item.stock}}
<button @click="handleDelete(i)">删除</button>
</li>
</ul>
</div>
</body>
<script src="../libs/vue.js"></script>
<script>
let vm = new Vue({
el:"#app",
data:{
newProduct:{
name:"",
stock:0
},
products:[
{name:"IPhone",stock:10},
{name:"Huawei",stock:8},
{name:"Vivo",stock:4}
]
},
methods:{
addProduct(){
this.products.push({
name:this.newProduct.name,
stock:this.newProduct.stock
})
},
handleDelete(i){
this.products.splice(i,1);
}
}
})
</script>
计算属性和方法的区别：
- 计算属性使用时，是当成属性使用，而方法是需要调用的
- 计算属性会进行缓存，如果依赖不变，则直接使用缓存结果，不会重新计算
- 计算属性可以当成属性赋值
<div id="app">
<input type="text" v-model="firstname">
<input type="text" v-model="lastname">
我的名字是:{{getFullName}} <br>
我的名字是:{{getFullName}} <br>
我的名字是:{{getFullName}} <br>
我的名字是:{{getFullName}} <br>
============================= <br>
我的名字是:{{getName()}} <br>
我的名字是:{{getName()}} <br>
我的名字是:{{getName()}} <br>
</div>
</body>
<script src="../libs/vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
firstname:"闫",
lastname:"虹志"
},
methods: {
getName(){
console.log("方法");
return this.firstname + this.lastname
}
},
computed: {
getFullName(){
console.log("计算属性");
return this.firstname + this.lastname
}
},
});
</script>
Comments