快速入门Vue
Posted Web小世界
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了快速入门Vue相关的知识，希望对你有一定的参考价值。
前端技术发展很快，近日一个项目中想用Vue框架，对此对Vue基础进行了一些学习整理
何为Vue，官网 解释Vue.js（读音 /vjuː/，类似于 view） 是一套构建用户界面的渐进式框架
这里记录主要是关于Vue中基础渲染DOM的一些操作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- moblile use -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
<title>vue测试</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<style type="text/css">
*{font-size: 16px;}
</style>
</head>
<body>
<div class="wrap">
<!-- 内容层 -->
<div class="content">
<h1 class="bannerPic">vue测试</h1>
</div>
</div>
<div id="app">
<p>{{ message }}</p>
<input type="text" v-model="message"/>
<h2 v-if="h2yes">显示这块内容</h2>
<!-- if不会渲染DOM，show是设置display显隐 -->
<h2 v-show="h2yes">显示这块内容</h2>
<p v-if="age>5">年龄{{age}}岁</p>
<p v-else >年龄小于5岁</p>
<!-- 事件绑定 -->
<button v-on:click="say(\'Hi\')">Hi</button>
<!--缩写语法-->
<button @click="greet">Greet</button>
<!--完整语法-->
<div v-for="n in age">
<a v-bind:class="now === n ? \'active\' : \'\'">{{ n }}</a>
<!--缩写语法-->
<a :class="now === n ? \'active\' : \'\'">{{ n }}</a>
</div>
</div>
<!-- 遍历 -->
<ul class="list">
<li v-for="(item,index) in people">
<p>{{index}} 姓名:{{item.name}} 年龄:{{item.age}} 性别:{{item.sex}}</p>
</li>
</ul>
<script type="text/javascript">
new Vue({
el: \'#app\',
data: {
message: \'Hello Vue\',
h2yes:false,
age: 5,
now: 2
},
methods: {
say: function(m){
alert(m);
},
greet: function(){
alert(this.message);
}
}
});
var listData = {people: [{
name: \'Jack\',
age: 30,
sex: \'Male\'
}, {
name: \'Bill\',
age: 26,
sex: \'Male\'
}, {
name: \'Tracy\',
age: 22,
sex: \'Female\'
}, {
name: \'Chris\',
age: 36,
sex: \'Male\'
}]};
var v1 = new Vue({
el:\'.list\',
data:listData
})
</script>
</body>
</html>
学习参考链接：
http://www.cnblogs.com/rik28/p/6024425.html
以上是关于快速入门Vue的主要内容，如果未能解决你的问题，请参考以下文章