Vue的简介和基本使用

Vue 简介

Vue.js（读音 /vjuː/，类似于 view） 是一套构建用户界面的渐进式的JavaScript框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。

1、易用

已经会了 HTML、CSS、JavaScript，即可阅读指南开始构建应用！

2、灵活

不断繁荣的生态系统，可以在一个库和一套完整框架之间自如伸缩。

3、高效

虚拟的DOM的核心思想是：对复杂的文档DOM结构，提供一种方便的工具，进行最小化地DOM操作。

(1) 提供一种方便的工具，使得开发效率得到保证

(2) 保证最小化的DOM操作，使得执行效率得到保证

当然这都是百度百科给我们的解释，这里只是入门研究，记录一些Vue的基本使用。

入门的简单使用

Vue渲染值 方法的定义和调用

首先是用Vue渲染值，和调用方法

导入Vue.js文件，然后定义一个Vue实例，El绑定组件，data定义数值

用{{}}的方式进行调用。

<div id="box">
			<h3>{{name}}</h3>
		</div>
		<script type="text/javascript">
			new Vue({
				el:"#box",
				data:{
					name:"李佳琪"
				}
			})
		</script>

调用方法

方法定义在methods中，调用的方法有很多种，最简单的就是{{方法名()}};

<div id="box">
			<h3>{{name}}</h3>
			<h3>{{alertd()}}</h3>
		</div>
		<script type="text/javascript">
			new Vue({
				el:"#box",
				data:{
					name:"李佳琪"
				},
				methods:{
					alertd:function(){
						alert(123)
					}
				}
			})
		</script>

Vue中的简单指令

v-if指令传入值为布尔类型，判断这个元素要不要渲染，v-show指令根本区别在于，v-show相当于隐藏，而v-if是不在页面渲染，也就是消失。

v-else是指v-if不成立的时候他就成立。

v-bind是绑定标签中的属性值，给属性值传入Vue中定义的数值，可以简写为冒号：

v-on是为标签绑定事件，事件可以调用方法可以简写为@

v-for是循环遍历，其中有三个参数，第一个为值，第二个为key，第三个为下标，从0开始。

遍历对象均可，对象中定义的属性也可以直接用{{}}取到。

直接用{{}}输出数组将变为字符串输出。

	<div id="box">
			<h3 v-if="choose">{{name}}</h3>
			<h3 v-else>{{name+1}}</h3>
			<input v-bind:value="name" />
			<input type="button" v-on:click="aaa" />
			<ul>
				<li v-for="user in users">{{user.names}}</li>
			</ul>
			<ul>
				<li v-for="(value,key,count) in stu">{{value}}{{key}}{{count}}</li>
			</ul>
			<h3>{{stu.namea}}</h3>
		</div>
		<script type="text/javascript">
			new Vue({
				el: "#box",
				data: {
					choose: false,
					name: "李佳琪",
					stu:{
						namea:"ss",
						age:"12"
					},
					users: [{
							names: "1",
						},

						{
							names: "2",
						},
						{
							names: "3",
						},
					]
				},
				methods: {
					aaa: function() {
						alert(123)
					}
				}
			})
		</script>

计算属性和监听属性 

计算属性定义在computed中，

计算属性顾名思义可以在其中操作data中定义的属性，计算一些总价格总成绩之后返回。

	<div id="box">
			<p>{{name}}</p>
			<p>{{hh}}</p>
		</div>
		<script type="text/javascript">
			new Vue({
				el: "#box",
				data: {
					name: "李佳琪"
				},
				computed:{
					hh:function(){
						this.name="123"
						return this.name;
					}
				}
			})
		</script>

监听属性

监听属性定义在watch中，监听那个属性就在写那个属性名之后定义方法，方法中可以执行一些自定义逻辑，最后用Vue实例调用监听属性定义方法进行赋值。

	<div id="box">
			<p>{{name}}</p>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el: "#box",
				data: {
					name: "李佳琪"
				},
				watch:{
					name:function(newValue,oldValue){
						
					}
				},
				
			})
			vm.name="ss";
		</script>