1. <div id="app">
  2.   {{ message }}
  3. </div>
  1. var app = new Vue({
  2.   el: '#app',
  3.   data: {
  4.     message: 'Hello Vue!'
  5.   }
  6. })

上面的代码就可以一个简单的 Vue 应用，会在浏览器显示Hello Vue

Vue 中的属性

1.属性：el ==> 挂载点

选中需要被 Vue 控制的元素，建议使用 id 选择器 ==> el:"#元素id"
或者理解成将 html 元素挂载到 Vue 中

2.属性：data ==> 数据对象

  • Vue 中用到的数据定义在 data 属性中
  • data 中可以写复杂类型的数据
  • 渲染复杂数据类型时，遵守 js 的语法即可。

如何获取 data 中的多层数据？==> 1层变量名.2层变量名.3层变量名

3.属性：method ==> 方法

Vue 指令

1.v-text ==> 设置元素的文本值

2.v-html ==> 设置元素的 innerHTML

  • 内容有 html 结构会被解析成标签，但是 v-text只会解析成文本

3.v-on ==> 为元素绑定事件

  1. <input type="button" value="事件绑定" v-on:click="dolt">    <!--鼠标单击事件-->
  2. <input type="button" value="事件绑定" v-on:mouseenter="dolt">   <!--鼠标移入事件-->
  3. <input type="button" value="事件绑定" v-on:dblclick="dolt"> <!--双击事件-->
  5. <input type="button" value="事件绑定" @dblclick="dolt">     <!-- v-on 可以被 @ 替换-->
  • 具体方法逻辑写在 Vue 实例的 method属性中
  • 实例代码中的属性名称含义对照 | type | 按钮类型 | | —- | —- | | value | 按钮在页面上显示的名称 | | v-on:xxx | xxx:事件名称 |

4.v-show ==> 根据表达式的真假切换元素的显示和隐藏

5.v-if => 根据表达式的真假切换元素的显示和隐藏

v-if和v-show的页面显示效果基本一致

  • v-if操纵dom元素切换显示状态，浏览器检查元素时代码会消失，需要的性能稍大些
  • v-show更改元素的 display ，浏览器检查元素时代码始终存在，频繁的切换使用v-show性能会更好一些。

6.v-bind ==> 设置元素的属性

格式：v-bind:属性名="属性值"

7.v-for ==> 循环

语法：(item,index) in 数据