前端技术发展很快，近日一个项目中想用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
时间： 2024-11-10 07:16:21