上一节搭建了vue的环境，本节就着重体现渐进式的优点，快速了解并在代码中大展身手。
想要学习Vue，至少理解HTML,CSS,JavaSript
但凡了解过编程的人都知道，了解一门语言，或者学习一门新技术，编写Hello World示例是我们的必经之路。
下面结合一些例子来使用一些默认的指令【此处未在上节下载的项目中演示，新建html文件并引入vue,js文件】
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--这是我们的View-->
<div id="app">
<div class="example1"> <!--展示双向绑定，使用v-model和v-text指令-->
<span>{{ message }}</span> <!--{{}}和v-text一致-->
<span v-text="message"></span>
<input type="text" v-model="message" />
</div>
<div class="example2"> <!--使用v-bind指令，使用:简写-->
<button v-bind:class="{ active: isActive }"> <!--当isActive为真时渲染为class="active"-->
<button :class="{'text-danger': hasError}">
</div>
<div class="example3"> <!--使用v-if和v-show指令-->
<p v-if="seen">现在你看到我了</p> <!--当seen为真是显示-->
<p v-show="seen">现在你看到我了</p> <!--当seen为真是显示-->
<!--两个指令的区别是：v-if是真正的创建与销毁，而v-show是改变display-->
<!--v-if可以配合v-else和v-else-if-->
</div>
<div class="example4"> <!--使用v-for指令-->
<ul>
<li v-for="item in todos"> <!--循环输出li标签及内容-->
{{ item.text }}
</li>
</ul>
</div>
<div class="example5"> <!--使用v-on指令，使用@简写-->
<button v-on:click="methodName">Button</button>
<button @click="methodName">Button</button>
</div>
<!--v-html指令：更新元素的 innerHTML，但并不建议使用-->
<!--v-pre指令：跳过元素的编译过程，一般不使用-->
<!--v-once指令：只渲染元素和组件一次-->
<!--v-cloak指令：保持在元素上直到关联实例结束编译,用法见API-->
</div>
<script src="vue.js"></script>
<script>
// 这是我们的Model
var data = {
message: 'Hello World!'，
todos: [
{ text: '学习 JavaScript' },
{ text: '学习 Vue' },
{ text: '整个牛项目' }
]
}
// 创建一个 Vue 实例或 "ViewModel"
// 它连接 View 与 Model
new Vue({
el: '#app', // 为实例提供挂载元素，即将实例挂载在id为app的元素上
data: data,
methods:{
methodName: function(){
// 实现触发click事件后执行的内容
}
}
})
</script>
</body>
</html>
网友评论