vue基础一

vue简介

是一种构建用户界面的渐进式框架。与其他重量级框架不同的是，vue采用自底向上增量开发的设计。vue的核心库只关注试图层，它不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当于单文件组件和vue生态系统支持的库结合使用时，vue也完全能够为复杂的单页应用程序提供驱动

使用方式(主讲安装方式一)

安装方式先讲第一种方式引入vue.js文件。

• 声明数据
  必不可少的

  var app=new Vue({
        el:"#app",
         data:{
                //添加数据
          }
   })
  

• 表达方式
  文本插值 {{}}
  将数据解析成dom节点 <div v-html="rawhtml"></div>

• 指令 指令以v作为开头，指令内部提供类js环境
  1、条件：v-if是否显示
  2、循环v-for循环
  3、v-on来绑定事件(简写使用"@")，JS里通过methods来定义事件（点击事件v-on:click）通过this来获取到数据
  4、v-bind来绑定属性（简写用“：”）
  5、v-model实现数据的双向绑定
  6、修饰符 prevent（阻止默认事件）

• 计算属性和观察者
  1、表达式中可以放一些简单的逻辑，但复杂的逻辑应该放在计算属性里面
  例如：

    computed:{
          nameReserve:function(){
                return this.myname.splice("").reserve().join("");
           }
     }
  

2、观察者模式 watch vue提供了一种更通用的方式来实现观察与相应vue实例上的数据变动：侦听属性

细节讲述

• 条件渲染
  v-if，v-else，key属性，当切换相同dom节点时候，vue会复用节点，如果想让节点在渲染时候也被替换的话可以加上key属性，当key值不一样的话就不会产生复用，v-for比v-if得优先级更高

• v-show和v-if
  v-show显示，v-show通过改变css来切换，开销较小，v-if是真正的渲染节点，性能消耗大，操作频繁使用v-show，用的v-if较少

• 事件处理
  v-on
  1、触发一些简单的函数，如：

  <div id="example-1">
    <button v-on:click="counter += 1">Add 1</button>
    <p>The button above has been clicked {{       counter }} times.</p>
  </div>
  

  2、事件处理方法：触发不带括号，接收时候可以接收到event对象，如：

      <button v-on:click="greet">Greet</button>
  

  3、.内联处理器中的方法，直接传递参数；通过关键字$event来传递event对象；如：

  <div id="example-3">
   <button v-on:click="say('hi')">Say hi</button>
    <button v-on:click="say('what')">Say what</button>
  </div>
  

  4、事件修饰符：按键修饰符（stop)鼠标按键修饰符（prevent ,once)
  5、输入表单绑定
  复选框，绑定时要给上数组
  修饰符，lazy，number，trim，可以和v-model复用
  6、axios的使用，如：

  axios.post("/post",{
                    ...this.users
                }).then(function (res) {
                    if(res.data.status==2){
                        console.log("注册成功")
                    }
                }).catch(function (error) {
                    console.log(error);
                });