超简单的Vue入门~1

一直在官网上看VUE的文档，觉的有点乱，所以在这里整理下VUE的一个入门知识点，如果有问题请发送[email protected]邮件或者在文章下面留言

1、VUE是什么？

“一个用于构建用户界面的渐进式框架”，所谓渐进式框架指的是没有强制主张，只做自己职责的事。以上是网络上流传的版本，个人的理解所谓的渐进式框架，是在使用vue开发页面时，所用的核心是VUE组件，在项目最开始只是一个组件，随着功能的完善逐渐增加更多的组件，所以被称为渐进式。（个人观点，并没有得到官方认证，觉得不对欢迎留言交流）

2、为什么使用VUE？

VUE支持把整个web页面划分成更加细小的组件组成，类似于把原来的一张图片分成数个拼图，以此来增加代码的灵活度，每个组件都有各自的HTML代码，js和CSS，让页面开发只集中于组件的开发。

3、怎么使用VUE

步骤如下：1、引入；2、HTML；3、创建对象

3-1、引用，引用VUE的js文件

开发版：<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
生产版：<script src="https://cdn.jsdelivr.net/npm/vue"></script>

3-2、编写HTML

简单DIV即可，用于显示VUE实例

<div id="d1">{{demo}}</div>	<!-- {{Mustache数据绑定}}，绑定实例中data中数据 -->

3-3、创建对象

var vm = new Vue({
	el:"d1",
	data:{
		demo:"hello VUE"
	}
})

4、vue小提高

简单vue介绍完成后，接下来是对vue命令的总结，在HTML代码中可以使用vue指令绑定一些处理操作，这里做下记录

1、v-on 绑定事件 缩写@，代码如下

HTML：
<div id="d1">
	<span @click="up">点击</span>	
</div>

JS:
var vm = new Vue({
	el:"#d1",
	methods:{
		up:function(){
			alert("弹框事件")
		}
	}
})

2、v-mode 表单输入绑定，代码如下

HTML：
<div id="d1">
	<input v-model="msg">	
</div>

JS:
var vm = new Vue({
	el:"#d1",
	data:{
		msg:"洒家~李"
	}
})

3、v-bind 标签中绑定属性 缩写“：”，代码如下

HTML:

<div id="d1">
	<a :href="url">点击</span>	
</div>

JS:
var vm = new Vue({
	el:"#d1",
	data:{
		url:"http://www.baidu.com"
	}
})

4、[] 动态参数

HTML：
<div id="d1">
	<a :[attr]="url">超链接</a>
</div>

JS：
new Vue({
	el:"#d1",
	data:{
		attr:"href",
		url:""
	}
})

5、class绑定&style绑定，其实也就是v-bind的使用

<div id="d1" :class=" c1 : thisC "><!--c1是一个css样式，兄弟你自己随便写一个就好-->
	class绑定
	<span :class="comC">通过计算属性修改</span>
	<span :style="{color:getColor}">绑定元素内部的style属性</span>
	<span :style="{getColorObject}">绑定对象到style</span>
	<span :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }">多重值绑定</span>
	<button @click="changeThis()">点击</button>
</div>

var vm = new Vue({
	el:"#d1",
	data:{
		thisC:true，
		getColor:'red',
		getColorObject:{
			color:"red"	
		}
	},
	computed:{
		comC(){
			return true
		}
	},
	methods:{
		changeThis(){
			this.thisC = !(this.thisC)
		}
	}
})

6、v-if 判断，代码如下

HTML:
<div v-if="isShow">
	isShow为true则显示
</div>

JS:
/* if表达式中也可以使用简单的计算 */
var vm = new Vue({
	el:"#d1",
	data:{
		isShow:true
	}
})

7、v-show 显示，主要控制css中的display

<h1 v-show="ok">Hello!</h1> <!--data中ok为true则显示-->

8、v-for 循环遍历，代码如下

HTML：
<div id="d1">
	<div v-for="item in items">
		<!-- 迭代数据的输出 -->
		{{item}}
	</div>
	<br>
	<div v-for="(item,index) in items">
		<!-- index为当前值下标 -->
		{{item}}-{{index}}
	</div>
	
	<h1>获取对象</h1>
	<div v-for="obg in object">
		{{obg}}
	</div>

	<h1>获取key值</h1>
	<div v-for="(obg,name) in object">
		{{obg}}---{{name}}
	</div>

	<h1>获取索引</h1>
	<div v-for="(value, name, index) in object">
	  {{ index }}. {{ name }}: {{ value }}
	</div>
</div>

JS:
var vm = new Vue({
	el:"#d1",
	data:{
		items:[
			"items数据名称",
			"item每次迭代数组元素的别名"
		],
		object:{
			title:"标题",
			content:"这是一个值"
		}
	}
})

9、v-html绑定HTML代码

HTML：
<span v-html="hdemo"></span> <!--替换为数值中的HTML-->

JS：
new Vue({ 
	el:"span",
	data:{
		hdemo:"<h1>这里是个HTML</h1>"
	}
})

关于vue的入门写到这里，关于VUE中还有关于Vue的属性编写会在下篇文章中总结