前端框架vue.js系列（1）：初学入门

傷城~ 2021-09-14 06:10 416阅读 0赞

vue是一套构建用户界面的渐进式框架，其核心库只关注视图层，通过使用vue手脚架，它完全能够为复杂的单页应用程序提供驱动。为了便于初学者入门vue语法，介绍语法部分均通过引用vue.js文件的方式来引入vue，在实际项目开发中，建议尽量**使用vue手脚架开发和npm来维护**。

# **渐进式框架** #

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

# **约定** #

本系列文章demo均以当前vue最新版本2.4.2为准，所有知识点都来自于vue官网及博主个人实际使用经验的总结而来，目的是为了让更多的前端开发人员能更迅速的掌握使用vue框架，本篇主要简单介绍一下vue的基本用法和语法，我们来创建第一个vue应用：hello world。

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

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

<!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>
    		
    		<div id="app">
    			{
       {message}}
    		</div>
    		<script>
    			var app = new Vue({
    				el: "#app",
    				data: {
    					message: "hello world"
    				}
    			});
    		</script>
    		
    		<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>
    		
    		<div id="app6">
    			<p>{
       {message}}</p>
    			<input type="text" v-model="message" />
    		</div>
    		<script>
    			var app6 = new Vue({
    				el: "#app6",
    				data: {
    					message: "helloworld"
    				}
    			});
    		</script>
    		
    		<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>
    
    </html>

# **完整vue实例结构** #

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

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

### el ###

绑定指定ID的元素标签并挂载在该Dom节点

### data ###

定义了作用域在该vue实例的变量

### methods ###

执行的方法函数

### filters ###

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

### computed ###

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

### components ###

组件

### watch ###

监察数据的变化。

### 其它 ###

值运算语法：

加减运算： \{ \{ number + 1 \}\}  
三元表达式 ：\{ \{ ok ? 'YES' : 'NO' \}\}  
自函数执行 \{ \{ message.split('').reverse().join('') \}\}  
指令字符串拼接 <div v-bind:id="'list-' + id"></div>

不同指令的不同入参区分  
指令v-if、v-show，入参为 true|false  
指令v-for，入参为 item in items  
带v-bind指令如v-bind:href，可缩写为:href  
带v-on指令如v-on:click，可缩写为@click

一个完整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>
    
    
    <script type="text/x-template" id="dt1">
    	<div>这里是动态子组件1</div>
    </script>
    
    <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的各个详细知识点。