您的位置：首页 > 产品设计 > UI/UE

前端框架vue.js系列（1）：基础及语法

2017-09-22 16:49 901 查看

Vue.js (读音 /vju?/，类似于 view) 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与单文件组件和 Vue 生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供驱动。

渐进式框架

那么，什么叫渐进式框架？渐进式框架可以理解为能支持任何其他前端框架及类库的一种框架。这就意味着vue框架没有任何结构上的主张，比如AngularJs前端框架对元素的控制必须用控制器controller。从另一个角度来说，vue可以兼容现在乃至未来任何的前端用户界面技术，这就是vue的强大之处。

约定

本系列文章Demo均以当前vue最新版本2.4.2为准，所有知识点都来自于vue官网及博主个人实际使用经验的总结而来，目的是为了让更多的前端开发人员能更迅速的掌握使用vue框架，另外在针对某些特殊功能时，如混合、路由等功能，开发人员们能有个官网外的实际参考案例。根据官方学习指南指示：假设你已有 HTML、CSS 和 JavaScript 中级前端知识。如果你刚开始学习前端开发，将框架作为你的第一步可能不是最好的主意——掌握好基础知识再来！

本篇主要简单介绍一下vue的基本用法和语法，我们来创建第一个vue应用。

hello world。

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="./js/libs/vue/2.4.2/vue.js"></script>
</head>

<body>
<!-- helloworld -->
<div id="app">
{{message}}
</div>
<script>
var app = new Vue({
el: "#app",
data: {
message: "hello world"
}
});
</script>
</body>

</html>

上例中new Vue()表示创建一个实例，el表示该实例绑定的元素id，data表示数据内容，数据格式为对象类型。在元素标签中用两个大挂弧{{}}表示的是数据输出，上例中{{message}}将输出为文本hello world。

另外vue常用的几个指令有：v-bind绑定，v-if条件，v-for循环，v-on监听，v-model双向绑定，Vue.component()创建组件，对于这些指令在本篇中大家不必深究，在这里博主写出来是为了让大家对指令有一个基本的认知，其使用Demo如下：

<body>
<!-- helloworld -->
<div id="app">
{{message}}
</div>
<script>
var app = new Vue({
el: "#app",
data: {
message: "hello world"
}
});
</script>
<!-- v-指令 -->
<div id="app2">
<span v-bind:title="message">鼠标悬停几秒钟查看此处动态绑定的提示信息！</span>
</div>
<script>
var app2 = new Vue({
el: "#app2",
data: {
message: '页面加载于 ' + new Date().toLocaleString()
}
});
</script>
<!-- 条件 -->
<div id="app3">
<span v-if="seen">现在你看见我了,但两秒后我消失了</span>
</div>
<script>
var app3 = new Vue({
el: "#app3",
data: {
seen: true
}
});
setTimeout(function() {
app3.seen = false;
}, 2000);
</script>
<!-- 循环 -->
<div id="app4">
<ol>
<li v-for="item in items">{{item}}</li>
</ol>
</div>
<script>
var app4 = new Vue({
el: "#app4",
data: {
items: ["a", "b", "c"]
}
});
</script>
<!-- 监听 -->
<div id="app5">
<span>{{message}}</span>
<button v-on:click="resetMsg(helloworld);">改变文本</button>
</div>
<script>
var app5 = new Vue({
el: "#app5",
data: {
message: "！！！！！！"
},
methods: {
resetMsg: function(resp) {
this.message = resp;
}
}
});
</script>
<!-- v-model双向绑定 -->
<div id="app6">
<p>{{message}}</p>
<input type="text" v-model="message" />
</div>
<script>
var app6 = new Vue({
el: "#app6",
data: {
message: "helloworld"
}
});
</script>
<!-- 组件component -->
<div id="app7">
<ol>
<my-li v-for="item in items" v-bind:todo="item" v-bind:key="item.id"></my-li>
</ol>
</div>
<script>
Vue.component("my-li", {
props: ['todo'], // 获取绑定的属性值
template: "<li>{{todo.text}}</li>"
});
var app7 = new Vue({
el: "#app7",
data: {
items: [{
id: 0,
text: '蔬菜'
}, {
id: 1,
text: '奶酪'
},
{
id: 2,
text: '随便其他什么人吃的东西'
}
]
}
});
</script>
</body>

完整vue实例结构

var vue = new Vue({
el: "",
data: {},
methods: {},
filters: {},
computed: {},
components: {},
watch: {}
});

大家要牢记vue语法及vue实例结构，因为熟悉这些将有助于你快速建立vue实例。

1.值运算语法：

文本里加减运算 {{ number + 1 }}

三元表达判断 {{ ok ? 'YES' : 'NO' }}

数据对象自身函数执行 {{ message.split('').reverse().join('') }}

指令里字符串的拼接 <div v-bind:id="'list-' + id"></div>

2.不同指令的不同入参区分

入参为true|false，如v-if、v-show

入参为item in items，如v-for

入参为元素属性，如v-bind:href,此类可缩写为:href

入参为事件，如v-on:click,此类可缩写为@click

3.methods

执行的方法函数

4.filters

通过vue实例的filters属性创建过滤器，创建的过滤器是一个函数,在值运算中用竖杠 | 表示

5.computed

通过vue实例的computed属性创建计算器，创建的计算器是一个函数,计算器会依赖于绑定的data而更新，如本例num更新，addOne也会更新。与过滤器和methods功能类似，不同的是若计算器依赖的数值不变，则不会重新执行函数，性能较优。

6.components

组件

7.watch

观察数据的变化。

一个完整vue结构的应用Demo如下:

<body>
<div id="app">
<span>[v-bind]：</span>
<a v-bind:href="url">baidu</a>
<br />
<span>[v-show]：</span>
<label v-show=true>Not Seen</label>
<br />
<span>[methods]：</span>
<button @click="clickFun();">ClickEvent</button>
<br />
<span>[filters]：</span>
<span>{{msg|capitalize}}</span>
<br />
<span>[computed]：</span>
<span>{{addOne}}</span>
<br />
<span>[components]：</span>
<component v-bind:is="currentView"></component>
<button @click="changeComponent">切换动态组件</button>
<br />
<span>[watch]：</span>
<input type="text" v-model="inpData" />
<span>{{inpReverse}}</span>
</div>
</body>

<!-- 动态组件模板1 -->
<script type="text/x-template" id="dt1">
<div>这里是动态子组件1</div>
</script>
<!-- 动态组件模板2 -->
<script type="text/x-template" id="dt2">
<div>这里是动态子组件2</div>
</script>

<script>
var vue = new Vue({
el: "#app",
data: {
url: "http://www.baidu.com",
msg: "hello",
num: 1,
inpData: "",
inpReverse: "",
currentView: 'dt1'
},
methods: {
clickFun: function() {
console.log("clickEvent");
},
changeComponent: function() {
if(this.currentView == "dt2") {
this.currentView = "dt1";
} else {
this.currentView = "dt2";
}
}
},
filters: {
//首字母变大写,其中value为竖杠|前一个对象，如有多个竖杠也同理
capitalize: function(value) {
if(!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
},
computed: {
addOne: function() {
return this.num + 1;
}
},
components: {
dt1: {
template: "#dt1"
},
dt2: {
template: "#dt2"
}
},
watch: {
inpData: function() {
this.inpReverse = this.inpData.split('').reverse().join(''); //倒序显示
}
}
});
</script>

通过本篇介绍，我们总结了vue的一些常用指令和vue的实例结构。从下篇开始，我们将逐一剖析vue的各个详细知识点。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： vue vuejs

相关文章推荐

新的分享

章节导航