vue基础之模板语法及指令

Vue的模板语法
1、Hello world

body>
	<div id="box">
		{{title}}
		<input type="text" v-model="title">
	</div>
	<script src="vue.js"></script>
	<script>
		var vm=new Vue({
			el:"#box",
			data:{
				title:"我今天很好;"
			}
		});
	</script>
</body>

在上面的代码中，我们通过new Vue() 构建一个Vue的实例
el:Vue要操作拿一个元素下面的区域，不如：#box则表示操作id为box的元素下面的区域
data:表示Vue实例的数据对象，data的属性能够响应数据的变化;每个Vue实例都会代理其data对象里所有的属性。

2. v-model 双向数据绑定
指令带有前缀v-表示它们是Vue.js提供的特殊属性。我们把则指令当作是特殊的Html特性（attribute）
3、v-attr会操作一个元素的特性 v-repeat会基于数组来复制一个元素 v-on会绑定事件
4、v-if指令条件渲染指令，根据表达式的真假来添加或删除元素。v-if=“expression”
返回true或false 也可返回true或false的表达式。

<p v-if="show">显示</p>
		<p v-if="hide">不显示</p>
		<p v-if="height">身高：{{height}}</p>
		<p v-if="name=='maomao'">名称:{{name}}</p>
	</div>
	<script src="vue.js"></script>
	<script>
		var vm=new Vue({
			el:"#box",
			data:{
				show:true,
				hide:false,
				height:1.78,
				name:'maomao'
			}
		});
	</script>

5、v-show 跟v-if差不多可是当false时有存在但是display:none隐藏了
v-show和v-if的区别：
1. v-if 是真实的条件渲染，因为它会确保条件块在切换当中适当地销毁与重建条件块内的事件监听器和子组件； v-show 则只是简单地基于 CSS 切换。
2. v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换使用 v-show 较好，如果在运行时条件不大可能改变则使用 v-if 较好。

6、v-else v-else-if
可以用v-else指令为v-if或v-show添加一个“else块”。注意：v-else前一兄弟元素必须有 v-if 或 v-else-if。


<p v-if="show">显示</p>
<p v-else>111</p>
	<script src="vue.js"></script>
	<script>
		var vm=new Vue({
			el:"#box",
			data:{
				show:false,
				hide:false,
				height:1.78,
				name:'maomao'
			}
		});
	</script>

7、 v-for 基于数据渲染一个列表，类似于JS中的遍历。其数据类型可以是 Array | Object | number | string。
该指令之值，必须使用特定的语法(item, index) in items, 为当前遍历元素提供别名。 v-for的优先级别高于v-if之类的其他指令

<!--第一种形式-->
<!--// v-for="p in people" -->
<div id="box">
    <table>
        <thead>
            <tr>
                <td>姓名</td>
                <td>年龄</td>
                <td>性别</td>
            </tr>
        </thead>
        <tbody>
            <tr v-for="p in people">
                <td>{{p.name}}</td>
                <td>{{p.age}}</td>
                <td>{{p.sex}}</td>
            </tr>
        </tbody>
    </table>
</div>
<script src="vue.js"></script>
<script>
    var vm=new Vue({
        el:"#box",
        data:{
            people:[
                {name:'zhangshan',age:10,sex:'nv'},
                {name:'maomao',age:10,sex:'nan'},
                {name:'wangwu',age:10,sex:'nan'},
                {name:'zhangge',age:10,sex:'nv'}
            ]
        }
    });
</script>

v-for="p in people"实例效果图

<!--第二种形式-->
<!--// v-for="(value, key) in object-->
<body>
<div id="app">
  <ul>
    <li v-for="(value, key) in object">
    {{ key }} : {{ value }}
    </li>
  </ul>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    object: {
      name: ''zhangshan'',
      url: 'http://www.maomao.com',
      slogan: '学的不仅是技术，更是梦想！'
    }
  }
})
</script>

v-for="(value, key)

<!--第三种形式-->
<!--//  v-for="(value, key, index) in object-->
<div id="app">
    <ul>
        <li v-for="(value, key, index) in object">
            {{ index }}. {{ key }} : {{ value }}
        </li>
    </ul>
</div>

v-for="(value, key, index)

vue基础之模板语法及指令

猜你喜欢