vue学习day1

关于vue的一些概念

• vue.js是前端的主流框架之一，与Angular.js以及React.js一起为前端三大主流框架
• vue.js的主要工作是负责MVC中的V，也就是视图层，用来制作前端页面效果
• vue的一个核心概念：让用户不再操作DOM元素，让我们有更多时间关注业务逻辑

Vue的基本代码

//Vue实例所控制的这个元素区域，就是view层
<div id='app'>
	<p>{{msg}}</p>
</div>

<script>
	//这个vm对象，就是MVVM结构中的VM调度者
	var vm = new Vue({
		el: '#app',
		//data可以视作MVVM中的M，用来保存页面数据
		data: {
			msg:'vue学习day1'
		}	
	})
<script>

vue中一些基本指令

v-clock

<p v-clock>{{msg}}</p>

• 可以解决插值表达式闪烁的问题

v-text

<h4 v-text="msg"></h4>

• 默认v-text没有闪烁问题
• 与差值表达式的区别：v-text会覆盖元素中原本的内容，插值表达式指挥替换自己的这个占位符

v-html

<div v-text="msg2"></div>

v-bind

<input type="button" value="按钮" v-bind:title="mytitle +'123'">

• 是vue中提供的用于绑定属性的指令
• 上述例子可以简写为 :title+要绑定的属性

v-on

<input type="button" value="按钮" v-on:click="show">

//methods属性中定了当前Vue实例所有可用的方法（与data，el同级）
		methods:{
			show:function(){
				alert('Hello')
			}
		}

• vue中提供了v-on:事件绑定机制
• 可以简写为 @

简单实例1：跑马灯

html部分：

<div id="app">
    <p>{{info}}</p>
    <input type="button" value="开启" v-on:click="go">
    <input type="button" value="停止" v-on:click="stop">
  </div>

vue实例

	// 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        info: '猥琐发育，别浪~！',
        intervalId: null
      },
      methods: {
        go() {
          // 如果当前有定时器在运行，则直接return
          if (this.intervalId != null) {
            return;
          }
          // 开始定时器
          this.intervalId = setInterval(() => {
            this.info = this.info.substring(1) + this.info.substring(0, 1);
          }, 500);
        },
        stop() {
          clearInterval(this.intervalId);
          this.intervalId = null
        }
      }
    });

vue中的事件修饰符

• .stop 阻止冒泡
• .prevent 阻止默认事件
• .capture 添加事件侦听器时使用事件捕获模式
• .self 只当事件在该元素本身（比如不是子元素）触发时触发回调
• .once 事件只触发一次
• stop和self的区别：self只会阻止自己身上冒泡行为的触发，stop阻止其他所有的

简单实例2：计算器

html部分：

 <div id="app">
    <input type="text" v-model="n1">
    <select v-model="opt">
      <option value="0">+</option>
      <option value="1">-</option>
      <option value="2">*</option>
      <option value="3">÷</option>
    </select>
    <input type="text" v-model="n2">
    <input type="button" value="=" v-on:click="getResult">
    <input type="text" v-model="result">
  </div>

vue实例

	// 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        n1: 0,
        n2: 0,
        result: 0,
        opt: '0'
      },
      methods: {
        getResult() {
          switch (this.opt) {
            case '0':
              this.result = parseInt(this.n1) + parseInt(this.n2);break;
            case '1':
              this.result = parseInt(this.n1) - parseInt(this.n2);break;
            case '2':
              this.result = parseInt(this.n1) * parseInt(this.n2);break;
            case '3':
              this.result = parseInt(this.n1) / parseInt(this.n2);break;
          }
        }
      }
    });

在vue中使用样式

使用class样式

1. 数组

<h1 :class="['red', 'thin']">哈哈</h1>

2. 数组中使用三元表达式（此处isactive属性从data字段读取）

<h1 :class="['red', 'thin', isactive?'active':'']">哈哈</h1>

3. 数组中嵌套对象

<h1 :class="['red', 'thin', {'active': isactive}]">哈哈</h1>

4. 直接使用对象

<h1 :class="{red:true, italic:true, active:true, thin:true}">哈哈</h1>

使用内联样式

• 直接在元素上通过 :style 的形式，书写样式对象
• 在data上定义样式
• 在:style中通过数组，引用多个data上的样式对象（数组形式）

vue中的v-for指令的一些使用方式和key属性（这部分及以后部分仍在学习，待补充）

循环普通数组

<div id="app">
		<p v-for="(item,i) in list">{{item}}</p>
	</div>
	<script>
		var vm=new Vue({
		el:'#app',
		data:{
			list:[1,2,3,4,5,6]
		}
	})
	</script>

循环对象数组

循环对象

迭代数字

• v-for循环的时候，key属性只能用number获取string
• key在使用的时候，必须使用v-bind属性绑定的形式，指定key的值
• 在组建中，使用v-for循环的时候，或者在一些特殊情况中，如果v-for有问题，必须在使用v-for的同时，指定唯一的字符串/数字 类型：key值

v-if和v-show

<input type="button" value="toggle" @click="flag">
	<h3 v-if="flag">这是用v-if控制的元素</h3>
	
	<h3 v-show="flag">这是用v-show控制的元素</h3>

	methods:{
			toggle(){
				this.flag=!this.flag
			}
		}

• v-if的特点：每次都会重新删除或创建元素
• v-show的特点：每次不会重新进行DOM的删除和创建操作，知识切换了元素的display样式
• v-if有较高的切换性能消耗；v-show有较高的初始渲染消耗
• 如果涉及到频繁的切换，最好使用v-show
• 如果该元素永远不会被现实出来的用户看到