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

来源：互联网发布：尚硅谷java视频教程编辑：程序博客网时间：2024/06/05 07:32

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的各个详细知识点。

阅读全文

1 0