Vue学习笔记

Vue

  Vue是一套前端框架，免除原生JavaScript中的DOM操作，简化书写
  基于MVVM思想，实现数据的双向绑定，将编程的关注点放在数据上
  官网
  MVC：只能实现模型到视图的单向展示
  MVVM：可以实现数据的双向绑定

Vue快速入门

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

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

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

new Vue({
		el:"#app",
		data(){
			return {
				username:""
			}
		}
});

  （3）编写视图

<div id="app">
	<input name="username" v-model="username">
	{{username}}
</div>

Vue常用指令

  （1）v-bind
    作用：为HTML标签绑定属性值，如设置href，css样式等
    例如：

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

  （2）v-model
    作用：在表单元素上创建双向数据绑定
    例如：

<input name="username" v-model="username">

  （3）v-on
    作用：为HTML标签绑定事件
    例如：
      html:

<input type="button" value="一个按钮" v-on:click="show()">
<input type="button" value="一个按钮" @click="show()">

      vue:

new Vue({
		el:"#app",
		methods:{
			show(){
				alert("我被点了");
			}					
		}				
});

  （4）v-if、v-else、v-else-if
作用：条件性的渲染某元素，判定为true时渲染，否则不渲染
例如：

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

  （5）v-show
    作用：根据条件展示某元素，区别在于切换的是display属性的值
    例如：

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

  （6）v-for
    作用：列表渲染，遍历容器的元素或者对象的属性
    例如：
      v-for：

<div v-for="addr in addrs">
	{{addr}}<br>
</div>

      加索引：

<div v-for="(addr,i) in addrs">
	<!-- i表示索引，从0开始 -->
	{{i+1}}:{{addr}}<br>
</div>

Vue生命周期

  （1）mounted：挂载完成，Vue初始化成功，HTML页面渲染成功
      发送异步请求，加载数据