vue框架的入门

最新推荐文章于 2024-02-01 16:34:52 发布

isDreamer

最新推荐文章于 2024-02-01 16:34:52 发布

阅读量202

点赞数 4

本文链接：https://blog.csdn.net/qq_39275155/article/details/100173357

版权

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

渐进式框架

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

<!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表示数据内容，数据格式为对象类型。在元素标签中用两个大挂弧{{…}}表示的是数据输出（这种写法源于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>
		<!-- 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>
 
</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(’’) }}
指令字符串拼接

不同指令的不同入参区分
指令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>
 
<!-- 动态组件模板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>

isDreamer

关注

4
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
vue框架的入门

vue是一套构建用户界面的渐进式框架，其核心库只关注视图层，通过使用vue手脚架，它完全能够为复杂的单页应用程序提供驱动。为了便于初学者入门vue语法，介绍语法部分均通过引用vue.js文件的方式来引入vue，在实际项目开发中，建议尽量使用vue手脚架开发和npm来维护。渐进式框架什么叫渐进式框架？渐进式框架可以理解为能支持任何其他前端框架及类库的一种框架。这就意味着vue框架没有任何结构上的...
复制链接

扫一扫