DAY1Vue学习—Vue引入、指令、模板插值语法

一、Vue引入和创建

1、引入vue.js文件或者用npm i vue 下载

2、vue类对象

（1)创建vue实例

const {creatApp}=Vue
creatApp({
  //data选项定义数据
  //为什么data定义为函数形式：保证一个vue实例对应一个数据对象
  data{
   return {
     mes:'Hello World',
   }
  }
  methods:{
   click(){} //定义的方法

  }


}).mount('#app')  //mount方法让vue实例与html元素关联

（2）当使用mount挂载app节点后，节点及内部的所有元素成为vue模板

二、语法和属性

1、{{变量}}  模板插值语法

    变量——data选项定义的数据

2、特殊属性

v-开头的特殊属性成为指令

（1）操作标签文本内容

v-html 指令（能识别标签等）

v-html="mes"

v-text 指令

v-pre 指令 

原封不动的显示模板插值语法的花括号

（2）操作属性

v-bind:属性名=“属性值”

简写  :属性名=“属性值”

（3）操作样式

样式是一个特殊属性

v-bind:class

:class="字符串"

:class="{样式名：布尔值，样式名2：布尔值}"

布尔值为true样式起作用

:class="['样式1'，’样式2‘]"

（4）操作事件

v-on 简写@

v-on:事件类型=“vue事件处理方法”  

@click="plus"

vue事件处理方法是定义在methods选项中

const {creatApp}=Vue
creatApp({
  //data选项定义数据
  //为什么data定义为函数形式：保证一个vue实例对应一个数据对象
  data{
   return {
     mes:'Hello World',
   }
  }
  methods:{
   plus(){
    console.log('plus方法')

   } //定义的方法

  }


}).mount('#app')  //mount方法让vue实例与html元素关联

<button @click="plus">按钮1</button>

(5)this使用

表示vue选项对象

通过this可以操作data中的数据和methods中的方法

const app=creatApp({
  data(){
    return{
     count=0

     }
   }
  methods:{
   plus(){

    this.count++
   }

  }
})

（6）v-model 指令

表单数据操作（双向数据绑定）

*checkbox

  v-model 绑定的checked属性值=》checked

*input输入框

输入框内容

value 属性值=》inputValue

*radio

*select 下拉选择框

option选中元素与selectValue相关

（7）v-if指令

<p v-if="online">在线</p>  //online值为true执行，否则执行下面
<p v-else="online">离线</p>
————————————————————————————
<p v-if="online==0">在线</p>
<p v-else-if="online==1">离线</p>
<p v-else="online">隐身</p>

（8）v-show

<h2 v-show="isShow">v-show指令</h2>
//isShow值为true显示，false隐藏
隐藏时，h2标签存在的

（9）v-for循环

<p v-for="item in list">{{item}}</p>  //list为数组
<p v-for="(item,index) in list">{{item}-{{index}}}</p>

三、vue框架监听data选项中数据变化，只要数据变化，自动异步更新界面