Vue学习-1-阿里云开发者社区

开发者社区> 开发与运维> 正文

Vue学习-1

简介: 为什么选择Vuejs 预读:为了满足当前移动webApp项目的开发需求,MVVM框架诞生,而VUEJS 便是这样一种js框架,其两大核心:数据驱动和组件化 为了解决webApp这些体验和开发上的不足,使用一个MVVM框架VUELS;

为什么选择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);
      }
    }
  });
  • 相信大家都注意到了,参数对象除了eldata属性之外,还多了一个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
      }
    });
  • 此时的实例中的datael还是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 组件停用时调用。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章