简介

Vue.js是一个JavaScript框架，旨在使开发者在开发过程中不被繁琐的DOM操作束缚，可以专心于逻辑层的操作。Vue是一个渐进式的框架，其核心库只关心视图的表现。

官网：https://cn.vuejs.org

简单上手（Hello Vue）

下面我们先来写一个简单的Hello Vue来看看Vue的基本语法和框架是长什么样的。

<div id="app">
  
</div>

var vm = new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue!'
    }
})

从上面的代码我们可以看到，Vue采用类似模版引擎的方式将文本渲染在DOM中，我们主要看看JavaScript部分的代码，当我们引入Vue.js这个文件后，我们就有了一个叫Vue的构造函数，所以我们想要使用Vue的时候，必须要先实例化一个对象。我们看到在app这个实例化对象中，主要有两个属性，一个 el ，另一个是 data，el顾名思义就是 element的缩写，即这里面应该写的是DOM元素，我们看到，上面代码是以选择器 的形式写的，ele里是一个id选择器app。data里有一个message，里面就是我们要渲染的文本了，这就是最基本的Vue语法。

条件语句

Vue给我们提供了一套特殊的逻辑判断，可以在标签里写上 v-if 这种相当于属性的写法，并在data里声明这个属性是 true还是false

<div id="app-3">
  <p v-if="seen">这是一个例子</p>
</div>

var vm = new Vue({
    el: "app-3",
    data: {
        seen: true
    }
})

这就相当于添加了一个叫做seen的类，有则显示，无则隐藏。

循环

遍历普通数组

<div id="app">
    <!-- v-for不能用于根元素 -->
      <div v-for="item in list"></div>
  </div>

 const app = new Vue({
      el: '#app',
      data: {
        list: [1,2,3,4,5,6]
      }
    })

遍历数组对象

<div id="app">
  <ol>
    <li v-for="todo in todos">
      
    </li>
  </ol>
</div>

var app4 = new Vue({
  el: '#app',
  data: {
    todos: [
      { text: '吃饭饭' },
      { text: '睡觉觉' },
      { text: '打豆豆' }
    ]
  }
})

数字迭代

 <div id="app">
    <!-- v-for不能用于根元素 -->
      <div v-for="item in 10"></div>
  </div>

 const app = new Vue({
      el: '#app',
    })

可以使用kv对遍历

 <div id="app">
      <div v-for="(value, key, i) in list">--------</div>
  </div>

第三个参数i一般是不写的

注意：

• v-for不能使用在根标签，也就是说不能放在渲染的第一级标签中
• 数字迭代时，是从1开始计数

v-cloak

cloak有遮掩的意思，那有什么用呢，我们在使用vue的模版时，其实会有一个问题，因为我们使用的是插值表达式，等待js脚本去渲染其中的内容，所以当我们网络比较慢时，我们会看到还未渲染的表达式，比如说``，这样就很不好，所以需要使用v-cloak来遮挡一下，加上这个属性后，我们控制其dispaly为none，就不会看到表达式了。

    [v-cloak] {
      display: none;
    }

 <div id="app" v-cloak>
    
  </div>

 const app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue!'
      }
    })

v-text

v-text 的显示效果和直接使用``来套用模版是一样的，仅有一点点的区别

• 区别一：

  语法区别，v-text是直接使用v-text=“values”的形式出现

• 区别二：

  v-text自带v-cloak的效果，也就是说使用v-text就不需要考虑遮盖表达式

• 区别三：

  v-text 会覆盖掉标签中所有的文本内容，也就是说只会显示定义的内容。

<div id="app" v-text="message"> </div>

 const app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue!'
      }
    })

v-html

顾名思义就是专门用来显示html的，语法与v-text一样

<div id="app" v-html="message"> </div>

 const app = new Vue({
      el: '#app',
      data: {
        message: '<h1>Hello Vue!</h1>'
      }
    })

v-show

用来表示元素是否显示的属性，属性为boolean类型，需要再格外定义当前属性值true还是false

v-show控制元素是否显示实际上是控制当前的display属性

<div id="app">
    <!-- 不显示是display:none -->
    <p v-show="flag"> 
      
    </p>
    <button id="btn" @click="toggle">toggle</button>
  </div>

 const app = new Vue({
      el: '#app',
      data: {
        message: '看的到我不',
        flag: true
      },
      methods: {
        toggle: function () {
          this.flag = !this.flag
        }
      },
    })

v-bind

绑定属性

使用v-bind:属性=“属性名”

eg： v-bind:title=“my-title”

可以使用:来简写

也就是:title=“my-title”

<div id="app" v-bind:title="message">悬停查看</div>

 const app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue!'
      }
    })

绑定样式

用v-bind可以在标签里绑定样式

• 用数组的方式列出样式

  <div id="app" :class="['class1','class2']">Hello Vue!</div>

class1: {
    color: skyblue;
}

class2: {
    font-size: 48px;
}

• 三元表达式

  <div id="app" :class="['class1', 'class2', flag? 'active': '']">Hello Vue!</div>

• 使用对象绑定样式

  <div id="app" :class="{active: flag}">Hello Vue!</div>

  <div id="app1" :class="{class1: true, class2: true}">Hello Vue!</div>

• 直接绑定style

  <div id="app" :style="{color: 'skyblue'}">Hello Vue!</div>

  <div id="app1" :style="[style1, style2]">Hello Vue!</div>

v-model

双向绑定，当绑定的值被修改，那么其变量的值也会被修改

 <div id="app">
    <p>
      
    </p> <br>
    <input type="text" v-model="message">
  </div>

const app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue!'      }
    })

上例中，当我们修改文本框的内容时，p标签里的内容也会被修改

v-on

用来绑定各种事件，用法是 v-on:事件=“事件名”

简写：@:click="show"

在v-on里我们将加入一个新的对象，methods , 方法的定义就写在这里

<div id="app">
  <p></p>
  <button v-on:click="show">点击显示</button>
</div>

var vm = new Vue({
    el: "#app",
    data: {
        message: "已点击",
        seen: false
    }
    method: {
    	show: function() {
    		this.seen = true;
		}
	}
	}
})

修饰符

• .stop
• .prevent
• .copture
• once
• self

跟在事件后面用用来修饰事件的修饰符。用法例如：@click.stop="show"

注意：

修饰符是可以多个一起连用的，例如@click.stop.once="show"