Vue基本标签及用法

Vue

• vue是一套前端框架，免除原生JavaScript的DOM操作，简化缩写

• 基于MVVM（Model-View-ViewModel）思想，实现数据的双向绑定，将编程关注放到数据上

• 官网：https://cn.vuejs.com

  
  

vue搭建步骤

1、新建HTML页面，引入Vue.js文件

<script src="js/vue.js"></script>

2、在JS代码区域，创建Vue核心对象，进行数据绑定

<script type="text/javascript">
		//创建vue核心对象
		new Vue({
			el:"#app",
			data(){
				return{
					username:""
				}
			}
		})
 </script>

3、编写视图

<div id="app">
    	<input type="text"v-model="username" />
		<!-- 插值表达式 -->
		{{username}}
</div>

Vue 常用指令

• 指令:HTML标签上带有v-前缀的特殊属性，不同指令具有不同含义。例如:v-if , v-for…
• 常用指令

v-bind

为HTML标签绑定屋性值，如设置href , css样式等

<av-bind:href="ur>百度一下</a>

<--v-bind可以省路 -->
<a :href="url">百度一下</a>

v-model

在表单元素上创建双向数据绑定

<input type="text"v-model="username" />

vue 内容

<script type="text/javascript">
		//创建vue核心对象
		new Vue({
			el:"#asd",
			data(){
				return{
					username:"",
					url:"http://www.baidu.com"
				}
			}
			})
	</script>

v-on

为HTML标签绑定事件

<input type="button" value="查看"v-on:click="show()" /><br>
<input type="button" value="添加"@click="add()" /><br>

vue 内容

<script type="text/javascript">
		//创建vue核心对象
		new Vue({
			el:"#asd",
			data(){
				return{
					username:"",
					url:""
				}
			},
			methods:{
				//定义一个显示函数
				show(){
					alert("查看")
				},
				add(){
					alert("添加")
				}
				}
			})
	</script>

v-if

条件性的渲染某元素,判定为true时渲染,否则不渲染

<div v-if="count ==3">div1</div>
<div v-else-if"count== 2">div2</div>
<div v-else>div3</div>

v-show

根据条件展示某元素，区别在于切换的是display届性的值

<div v-show="count==3">div4</div>

v-for

列表渲染，遍历容器的元素或者对象的属性

<div v-for="addr in addrs">
			{{addr}}
</div>
<hr >
<div v-for="(addr,i) in addrs">
		{{i+" "+addr}}
</div>

vue内容

<script type="text/javascript">
		//创建vue核心对象
		new Vue({
			el:"#asd",
			data(){
				return{
					username:"",
					url:"http://www.baidu.com",
					addrs:["南京","苏州","扬州"]
				}
			}
			})
	</script>

vue生命周期

• 生命周期的八个阶段:每触发一个生命周期事件，会自动执行一个生命周期方法(钩子)

• mounted：挂载完成，Vue初始化成功，HTML页面渲染成功。

发送异步请求，加或数据

Element组件

• Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库
• 官网：https://element.eleme.cn

Element快速入门

1.引入Element的css、js文件和Vue.js

<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript" src="element-ui/lib/index.js"></script><link rel="stylesheet" type="text/css" href="element-ui/lib/theme-chalk/index.css"/>

2.创建Vue核心对象

<script type="text/javascript">
		new Vue({
			el:"#app",
		})
	</script>

2.创建Vue核心对象

<script type="text/javascript">
		new Vue({
			el:"#app",
		})
	</script>

3.官网复制Element组件代码