Vue学习一

为什么选择Vuejs

预读:为了满足当前移动webApp项目的开发需求,MVVM框架诞生,而VUEJS 便是这样一种js框架,其两大核心:数据驱动和组件化

• 为了解决webApp这些体验和开发上的不足,使用一个MVVM框架VUELS;

什么是MVVM

(数据驱动视图)

• View --- ViewModel --- Model三部分

页面DOM viewModel model数据

• 中间监控两侧的数据,并相对应地通知另一侧进行修改;

这就是MVVM框架,属于MVVM的JS框架还有React.js,Angular.js

Vue的优点

• Vue更轻量更快
• 更容易上手

Vue核心

-通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件

• 数据绑定
  • Vue数据驱动视图:数据改变视图自动更新,传统的做法要手动改变DOM来改变视图,VUEJS只需要改变数据,就会自动更改视图,不用再担心DOM;
• 视图组件化
  • 把整一个网页的拆分成一个个区块，每个区块我们可以看作成一个组件。网页由多个组件拼接或者嵌套组成;

​

使用场景

• 如果你还在用jQuery来频繁的操作你的DOM更新页面的话,就可以用vue.js来解放DOM操作;
• 如果项目中有多个部分是相同的,并可以封装成一个组件,那就可以使用Vue.js
• 此外,vue.js的核心使用了ES5的Object.defineProperty特性.IE8以下的版本是不兼容的;

总结

为了更好满足当前移动webapp项目的开发需求，MVVM框架诞生，而Vue.js便是这样的一种js框架，其两大核心：数据驱动和组件化。

简单安装和快速入门Vue.js

• 如果不想安装到本地,使用CDN方式,引入网上的资源

  <script src="https://xx/vue.js"></script>

• 还可以通过npm在命令行下载

数据驱动视图

 <div id="app">
    公众号：{{ name }}
  </div>
  <script>
      let vm = new Vue({
          el:"#app",
          data:{
             name:"web前端教程",
          }
      });
  </script>

• 我们通过new Vue( )创建一个实例vm，参数是一个json对象，属性el提供一个在页面上存在的DOM 元素(id='app')，表明这个实例是关联指定的DOM节点。
• 在DOM节点上，我们就可以使用双大括号{{ }}的语法来渲染Vue实例对象data中已经存在的属性值，如上面案例中的name属性的值“web前端教程”就会被渲染到页面中，替换{{ name }} 显示效果为：“web前端教程”

双向绑定

• 例子:监听用户在页面输入框输入的内容，然后将其实时更新在页面上。

在Vue中我们使用v-model指令就可以轻松实现

<div id="app">
     <input v-model="number">
     <p>数字:{{ number }}</p>
 </div>
 <script>
     let vm = new Vue({
         el:"#app",
         data:{
             number:"",
         }
     });
 </script> 

组件

组件化就是把页面中特定的区块独立抽出来，并封装成一个可方便复用的组件。

• 加入页面上有三个同样的图片,传统的办法,我们需要写三个同样布局的HTML布局;

 <div id="app">
    <!--第1个卡片-->
    <div class="card">
        <img src="logo.png" alt="">
        <h2>web前端教程</h2>
        <p>这里是描述，很长的描述</p>
        <button>我是按钮</button>
    </div>

    <!--第2个卡片-->
    <div class="card">
        <img src="logo.png" alt="">
        <h2>web前端教程</h2>
        <p>这里是描述，很长的描述</p>
        <button>我是按钮</button>
    </div>

    <!--第3个卡片-->
    <div class="card">
        <img src="logo.png" alt="">
        <h2>web前端教程</h2>
        <p>这里是描述，很长的描述</p>
        <button>我是按钮</button>
    </div>
 </div>

• 如果我们把每个卡片看作一个可复用的区域的话，那么它就可以封装成一个组件。

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

  <script>
    //注册一个名叫card的组件
  Vue.component('card',{
        template:`<div>
            <img src="logo.png" alt="">
            <h2>web前端教程</h2>
            <p>这里是描述，很长的描述</p>
            <button>我是按钮</button>
        </div>`
    });

• 我们用Vue.component(tagName, options)注册了一个名字叫card的组件，这样，在需要复用这个组件的地方，我们只需要使用就可以了。实际开发中，组件比这个复杂得多，越复杂，封装后的便利性越高
• 可能你会说，组件里面的显示的内容不可能全都一样。放心，Vue为组件提供了props属性来接受传递进来的参数,后面会介绍

​

创建一个Vue实例

创建语法

<script>
 var app=new Vue({})
</script> 

设置数据

  let vm = new Vue({
     //实例vm的数据
   data:{
          name: "张三",
          age :  21
     }
  });

挂载元素

//视图view部分
<div id="app"></div>

渲染

  <div id="app">
  我是{{ name }}，
  今年{{ age }}岁
  </div>

总结

创建并使用一个Vue实例并不难，仅需4步走：

newVue----->设置数据----->------->挂载元素------->成功渲染

定义Vue常用的4个常用选项

filters 过滤器

例如:我们有一组数字全是小数,

let vm = new Vue({
    //挂载元素
  el:'#app',

    //实例vm的数据
  data:{
         num1:33.141,
         num2:46.212,
         num3:78.541
    }
 });

展示到页面中

 <div id="app">
   数字1：{{ num1 }}<br>
   数字2：{{ num2 }}<br>
   数字3：{{ num3 }}
 </div>

• 突然，需求改了，我们不能把小数展示出来，需要把小数转换成整数再显示
• 这个时候，我们需要把三个小数经过过滤处理后再展示，不能直接展示。这种情况就需要用到Vue的filters过滤器了

 let vm = new Vue({
    //挂载元素
  el:'#app',
    //实例vm的数据
  data:{
         num1:33.141,
         num2:46.212,
         num3:78.541
    },
    //过滤器
  filters:{
      toInt:function(value){
         return parseInt(value);
      }
    }
  });

• 相信大家都注意到了，参数对象除了el和data属性之外，还多了一个filters属性，它的值也是一个对象，里面定义了一个叫toInt( )的方法，传入了一个value的参数，函数的作用就是把传入的参数value，简单地转成一个整出并return回去。

紧接着:通过管道符|把函数toInt 放在变量后面即可，num1，num2，num3会分别作为参数value传入toInt( value )方法进行运算，并返回一个整数

<div id="app">
    数字1：{{ num1 | toInt}}<br>
    数字2：{{ num2 | toInt}}<br>
    数字3：{{ num3 | toInt}}
  </div>

computed计算属性

我们有三个数，但是需要展示的是三个数字之和。这种情况，就适合用我们的计算属性computed。

 let vm = new Vue({
    //挂载元素
  el:'#app',
    //实例vm的数据
  data:{
         num1:1,
         num2:3,
         num3:6
    },
    //计算属性
  computed:{
        sum:function(){
          return this.num1+this.num2+this.num3
        }
    }
 });

紧接着 :

 <div id="app">
   总和：{{ sum }}
 </div>

需要注意的是，sum的值是依赖data中的数据num1，num2，num3的，一旦它们发生了变化，sum的值也会自动更新。

methods 方法

我们定义一个数据a，当用户点击按钮的时候，a的值加1。这种情况，我们可以利用methods来实现。

let vm = new Vue({
    //挂载元素
  el:'#app',
    //实例vm的数据
  data:{
         a:0
    },
    //方法
  methods:{
        plus:function(){
            return this.a++;
        }
    }
 });

定义一个plus( )的方法在methods中，下面我们把plus( ) 绑定在按钮的点击事件上

<div id="app">
    {{ a }}
    <button v-on:click="plus">加1</button>
</div>

watch观察

watch选项是Vue提供的用于检测指定的数据发生改变的api。

//在上面的例子中,在方法下面直接再加一个属性
watch:{
        a:function(){
          console.log(`有变化了，最新值：`);
          console.log(this.a);
        }
    }

最后一部分watch就是我们新加的代码，a( ) 表示我们要观察监听的就是数据a;

Vue的实例的生命周期

Vue把整个生命周期划分为创建、挂载、更新、销毁等阶段，每个阶段都会给一些“钩子”

beforeCreate

<script>
    let app = new Vue({
      el:"#app",
        data:{
         name:"前端君"
      },
      beforeCreate(){
         console.log('即将创建');
         console.log(this.$data);//undefined
         console.log(this.$el);//undefined
      }
    });

• 此时的实例中的data和el还是undefined,不可用的。

created

created(){
    console.log('创建完毕'); //创建完毕
    console.log(this.$data); //object{_ob_:Observer}
    console.log(this.$el);//undefined
 }

• 此时，我们能读取到数据data的值，但是DOM还没生成，所以属性el还不存在，输出$data为一个Object对象，而$el的值为undefined。

beforeMount

beforeMount(){
   console.log('即将挂载');
   console.log(this.$el); //<div id="app">{{name}}</div>
}

• 此时的$el不再是undefined，而是成功关联到我们指定的dom节点
  
  ，但此时{{ name }}还没有被成功地渲染成我们data中的数据。

mounted

 mounted(){
    console.log('挂载完毕');
    console.log(this.$el);//<div id="app">前端课程</div>
 }

• 此时打印属性el，我们看到{{ name }}已经成功渲染成我们data.name的值：“前端课程”。

beforeUpdate

• 当修改vue实例的data时，vue就会自动帮我们更新渲染视图，在这个过程中，vue提供了beforeUpdate的钩子给我们，在检测到我们要修改数据的时候，更新渲染视图之前就会触发钩子beforeUpdate

//html片段代码我们加上ref属性，用于获取DOM元素（后期会讲到）。
 <div ref="app" id="app">
    {{name}}
 </div>

// Vue实例代码加上beforeUpdate钩子代码：
 beforeUpdate(){
  console.log('=即将更新渲染=');
  let name = this.$refs.app.innerHTML;
  console.log('name:'+name);
 },

在控制台修改一下实例的数据name，在更新渲染之前,name还是之前的数据,视图并未重新渲染更新

updated

• 此阶段为更新渲染视图之后，此时再读取视图上的内容，已经是最新的内容，接着上面的案例，我们添加钩子updated的代码

 updated(){
  console.log('==更新成功==');
  let name = this.$refs.app.innerHTML;
  console.log('name:'+name);
 }

此时name 的值已经被改变了,视图已经更新;

beforeDestroy

• 调用实例的destroy( )方法可以销毁当前的组件，在销毁前，会触发beforeDestroy钩子

destroyed

• 成功销毁之后，会触发destroyed钩子，此时该实例与其他实例的关联已经被清除，它与视图之间也被解绑。
• 此时再在控制台修改数据,视图不会改变

actived

• keep-alive组件被激活的时候调用

deactivated

• keep-alive 组件停用时调用。