像使用模板引擎一样来使用 Vue.js
需求:
1. 点击自增
2. 点击切换显示与隐藏
3. 列表渲染
art-template 模板引擎语法
{{}} 数据绑定
{{ each xxx }} 数据遍历
{{ if }} 逻辑判断
。。。
<style>
.box {
width: 200px;
height: 200px;
background-color: hotpink;
}
</style>
此时 div 就是被 Vue 管理的模板
里面可以直接使用 Vue 的模板语法
<div id="app">
<h1>{{ 1+1 }}</h1>
<h2>hello {{ foo }}</h2>
<ul>
需要遍历的节点使用v-for 指令
item in todos
item 是随便起的一个名字,表示当前遍历项
in 是固定语法
todos 是 data 数据中的 todos
<li v-for="item in todos">{{ item.title }}</li>
<h2>判断</h2>
v-if 是用于判断的指令
它的值需要给一个布尔结果
如果为true 则渲染,否则不渲染
<div class="box" v-if="seen"></div>
</ul>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
//3.创建vue实例
//指定要管理的模版入口
//初始版模版数据
//在模版中通过vue.js语法使用模版数据
var app = new Vue({
el: '#app',//告诉vue模版入口是id=app的节点
data: { 模版数据,这里的数据可以直接在模版中使用
foo: 'bar',
seen: true,
todos: [
{ id: 1, title: '吃饭' },
{ id: 2, title: '睡觉' },
{ id: 3, title: '打豆豆' },
{ id: 4, title: '写代码' }
]
},
methods: {}
});
</script>
这里就是把vue数据渲染到页面上,就是把vue里面todos的数据遍历到页面上,用一个v-if判断是否显示粉色框子。主要使用以下
{{}} 数据绑定
{{ each xxx }} 数据遍历
{{ if }} 逻辑判断