Vue有三种生成虚拟Dom树的方法，分别是：outerHTML、template、render
outerHTML模板类似传统HTML+JS的写法，用HTML写好页面，引入vue.js，然后写js代码和vue指令进行模板渲染，需要编译
template模板是将HTML代码和Vue指令等都写到实例化后的Vue对象的template配置中，需要编译
<!-- vue是渐进式的，并不要求整个网站全部使用vue，可以只在某个区域使用vue的功能 -->
<!--↓↓↓↓↓↓ vue控制的界面模板 ↓↓↓↓↓↓-->
<div id="app"></div>
<!--↑↑↑↑↑↑ vue控制的界面模板 ↑↑↑↑↑↑-->
<script src="./vue.js"></script>
<script>
var products = [
{id: 1, name: '苹果', num: 10},
{id: 2, name: '香蕉', num: 15},
{id: 3, name: '橘子', num: 20}
];
var methods = {
minus(product){
product.num = product.num - 1 < 0 ? 0 : product.num - 1;
},
del(index){
//this 表示 vm 实例
this.products.splice(index,1);
}
}
//vm：vue实例
var vm = new Vue({
//配置
el: "#app", //css选择器
template: `
<div id="app">
<!-- vue使用mustache模板引擎 -->
<h1>系统名称是：{{title}}</h1>
<ul>
<!--
v-for参数：
item 循环数组每一项
i 下标
-->
<li v-for="(item,i) in products" :key="item.id">
商品名称：{{item.name}}，
<button v-if="item.num>0" @click="minus(item)">-</button>
<span v-if="item.num>0">数量：{{item.num}}</span>
<span v-else>没库存</span>
<button v-if="item.num>0" @click="item.num++">+</button>
<button @click="del(i)">删除此项</button>
</li>
</ul>
</div>
`,
data: {
//和界面相关的数据
title: '库存管理系统',
products: products
},
methods: methods
});
</script>
render模板是将代码写到实例化Vue后的render配置中，这种方法是通过函数直接创建虚拟节点，此时完全脱离模板，省略编译步骤
打赏
15601023311
