2、简易安装快速入门VueJs

阅读() @2018-10-29 18:16:11

一、安装VueJs

有很多方法可以将VueJs导入到自己的开发项目中,这里使用最简单粗暴的方法:通过script标签的src属性引入vue文件,直接使用。

点击下载:《Vue.js2.2.6下载》,打开之后直接将代码拷贝到你新建的vue.js文件中即可。

二、数据驱动视图

引入之后,我们就可以把它用起来。听说它最厉害的地方是数据驱动视图,解放DOM操作,让你不再做又复杂又耗性能的DOM操作。那么,我们就看看它是怎么玩的!

假设,我们现在要把js对象中的某个变量的值渲染在页面上,传统的做法,就是先用getElementById获取到DOM节点对象,再innerHTML设置它的内容。

现在,在Vue.js中,你需要这样做:

 <div id="app">
    博客:{{ name }}
  </div>
  <script type="text/javascript" src="http://www.zymseo.com/js/vue.js"></script>
  <script>
      let app = new Vue({
          el:"#app",
          data:{
             name:"赵一鸣VueJs学习笔记",
          }
      });
  </script>

我们通过new Vue( )创建一个实例vm,参数是一个json对象,属性el提供一个在页面上存在的DOM 元素(id='app'),表明这个实例是关联指定的DOM节点。

在DOM节点上,我们就可以使用双大括号{{  }}的语法来渲染Vue实例对象data中已经存在的属性值,如上面案例中的name属性的值“赵一鸣VueJs学习笔记”就会被渲染到页面中,替换{{ name }} 显示效果为:“赵一鸣VueJs学习笔记”。

在此过程中,我们并没有写过操作DOM节点的代码,而且,上一节笔记讲过,MVVM模式中的viewModel充当着监控者的角色,假如它监控到model数据发生了变化,便会通知view视图进行更新,这个过程并不需要你去参与。

MVVM视图解析

我们可以在chrome浏览器中演示一下:

vue的双向数据绑定

如上图所示,一旦name的值被改变了,页面上立马跟着发生了变化,而不需要你再写innerHTML去更新视图了。

三、双向数据绑定

更方便的是,Vue.js还提供了方便的语法指令,实现视图和数据的双向绑定,也就是说,不但数据变化了可以驱动视图,用户在页面上做了一些操作,也很方便地实现更新model层的数据。

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

在Vue中我们使用v-model指令就可以轻松实现(v-model类似于angular中的ng-model)。

<div id="app">
        <input type="text" v-model="name" />
        {{name}}
 </div>
<script type="text/javascript">
    var app = new Vue({
        el : '#app',
        data : {
            name : '赵一鸣VueJs学习笔记'
        }
    });
</script>

我们不需要写代码去监听input控件的内容变化,用户输入的内容,会实时地更新vm实例中的data属性message的值,一旦message更新了,视图也会跟着更新了。因为这一切,都由Vue.js帮你完成了。

四、组件

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

传统的办法,我们可以要写三份同样的HTML布局:

<div id="app">
    <!--第1个卡片-->
    <div class="card">
        <img src="logo.png" alt="">
        <h2>赵一鸣个人技术博客</h2>
        <p>这里是描述,很长的描述</p>
        <button>我是按钮</button>
    </div>

    <!--第2个卡片-->
    <div class="card">
        <img src="logo.png" alt="">
        <h2>赵一鸣个人技术博客</h2>
        <p>这里是描述,很长的描述</p>
        <button>我是按钮</button>
    </div>

    <!--第3个卡片-->
    <div class="card">
        <img src="logo.png" alt="">
        <h2>赵一鸣个人技术博客</h2>
        <p>这里是描述,很长的描述</p>
        <button>我是按钮</button>
    </div>
</div>

如果我们把每个卡片看作一个可复用的区域的话,那么它就可以封装成一个组件。在Vue.js中,我们试着把卡片封装成一个组件。

<div id="app">
        <card></card>
        <card></card>
        <card></card>
 </div>
<script type="text/javascript">
    Vue.component('card', {
        template : '<h1>赵一鸣WEB前端开发学习笔记</h1>'
    });
    var app = new Vue({
        el : '#app',
        data : {
            name : '赵一鸣VueJs学习笔记'
        }
    });
</script>

我们用Vue.component(tagName, options)注册了一个名字叫card的组件,这样,在需要复用这个组件的地方,我们只需要使用<card></card>就可以了。实际开发中,组件比这个复杂得多,越复杂,封装后的便利性越高。

目前,组件里面的显示的内容不可能全都一样。Vue为组件提供了props属性来接受传递进来的参数,进而根据参数显示不同的内容,这个会在后面的笔记中展开。

本节完!

微信二维码