Vue的基础认识

下面来简单介绍下Vue：
vue是渐进式JavaScript框架（MVVM的JS框架）
特点：易用（使用成本低），灵活（生态系统完善，适用于任何规模的项目），高效（体积小，优化好，性能好）
其高效性具体表现为：
1.运行效率高 采用虚拟dom 减少真实dom的操作使项目的运行效率大大提高；
2.开发效率高 采用了组件化开发 。
因此将开发者的精力从dom操作解放出来，转移到数据操作上
详细介绍请进入vue官网

接下来看一下怎样创建及使用vue
1.可以直接下载并用 script 标签引入，Vue 会被注册为一个全局变量。
2.或者直接引入CDN：<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
引入之后就可以在js中实例化vue

//创建一个vue的实例
let vm =new Vue({
  el:"#app", // 将vue的实例和dom中的某一个元素进行绑定 绑定的元素以及子节点都会被实例进行处理
  data:{      // data里的数据直接可以通过插值法 {{表达式变量}} 进行渲染
    name:'你好世界',
    state:true
  }
})

html页面中

 <!-- 和实例绑定了 就会用vue的语法进行处理 -->
  <div id='app'>
    {{name}} 
  </div>
  <!-- 没有被实例绑定 和原始的页面没有区别 -->
  <div id='demo'>
    {{name}}
  </div>

其结果为
在一个页面可以实例化多个vue实例，每一个实例绑定自己的元素，但数据不通用

将data中的数据在视图中使用，这个过程叫数据绑定，方向 data->view
正常的数据类型都可以绑定并显示，除特殊的null、 undefined ，只能绑定不能显示
{{}} 插值法内部 ，放的是变量和表达式

正常的数据类型都可以绑定并显示 ，特殊的 null、 undefined 只能绑定不能显示
{{}} 插值法内部 ，放的是变量和表达式

Vue的基本指令
条件渲染
v-if 控制一个元素的渲染不渲染,而v-if所控制的内容只会在指令的表达式或变量返回 true值的时候才会被渲染。
<目标元素 v-if=‘变量或者表达式’></目标元素>

<div v-if='state' class="test"> </div>//state为上面data里的属性
<div v-else class ='test2'> </div>

v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。当v-if 的表达式或变量为false时，则渲染v-else所控制的元素

v-show 可以控制元素的显示隐藏通过display：none ，不管显示还是隐藏，元素都是存在

<div v-show ='state' class="test"></div>

v-if与v-show区别：
当 v-if为假，该元素都不会创建；
而v-show 不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换；
v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。

事件绑定
v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。

<div id = 'app'>
  <button v-on:click='toggle(1,2,$event)'>toggle</button>
  <button @click = 'toggle2'>toggle2</button> 
</div>
<script>
let vm = new Vue({
  el:'#app',
  data:{
    show:false
  },
  methods: {  //vue中写事件函数的地方
    toggle:(num1,num2,e)=>{
      console.log('点到我了',num1,num2,e)
    },
    toggle2(){
      console.log('点到第二个了')
    }
  },
})
</script>

v-on:事件名=‘事件处理函数’ ，事件名和原生js一样
onclick => v-on:click
onblur => v-on:blur
…
事件处理函数一定要写在实例的 methods内部,
默认参数（什么参数都不传就有的参数）是事件对象 ，
如果有其他参数，则需要事件对象则通过 $event 手动传递
简写方式
v-on:click === @click

数据的响应式
数据变，页面自动变，不需要开发者操作dom
将开发者的精力从dom操作解放 转移到数据操作上

<div id = 'app'>
    {{num}}
    <button v-on:click='add'>add</button>
</div>

<script>
let vm  = new Vue({
  el:"#app",
  data:{
    num:1
  },
  methods: {
    add(){
      console.log(this)//指代当前vue的实例对象
      this.num++
    }
  },
})

属性绑定
v-bind： 可以让属性后面跟变量或者表达式

<div id = 'app'>
  <img src="url" alt="">
  <img v-bind:src="url" alt="">
  <img :src="url" alt="">
</div>

<script>
let vm  = new Vue({
  el:"#app",
  data:{
    url:'https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2164734927,1367682520&fm=26&gp=0.jpg'
  }

})
</script>

简写：v-bind:src === :src

列表渲染
v-for指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。

<div id = 'app'>
  <ul>
    <!-- 循环数组 -->
    <li v-for = '(item,index) in lists'>{{item}}{{index}}</li> 
    <!-- 循环对象 -->
    <li v-for="(value,key,index) in obj">{{key}}:{{value}}-{{index}}</li> 
  </ul>
</div>

<script>
let vm  = new Vue({
  el:"#app",
  data:{
    lists:['红色高跟鞋','真实魔鬼游戏','潜伏'],
    obj:{us:'王一',ps:'12345'},
  },
})
</script>

结果：

v-for 绑定一个标签 循环一个数据源
 <li v-for ='循环数据的每一项 in/of 要循环的数据'></li>
<li v-for ='(循环数据的每一项,每一项的下标)in/of 要循环的数据'></li>
<li v-for="(对象value,对象里的key,下标) in 要循环的对象">{{key}}:{{value}}-{{index}}</li>

双向数据绑定
v-model 指令在表单 input、textarea 及 select 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素

<div id = 'app'>
  <input type="text" v-model='val'>
  {{val}}
</div>

<script>
let vm  = new Vue({
  el:"#app",
  data:{
    val:'你好'
  },
})
</sccript>

结果为：

上述input框内的内容发生改变时,data里的val值也会发生改变，页面上也是如此

本次就是我对vue的简单介绍，可能有的描述不够详细、规范，望见谅！！