Vue-学习。

2. Hello World

Vue.js 的骨干是1个允许使用不难的模板语法来表明式的将数据渲染进 DOM

二.3双向数据绑定

MVVM格局本人辅助双向绑定,在Vue.js中得以选用v-model一声令下在表单元素上成立双向数据绑定。

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

 

如此无论改变输入框的内容还是经过控制台修改message的值,另1个值都会同时被转移。

图片 1

1. 引入Vue.js

安装Vue能够通过查看官方安装教程来打探任何设置
Vue 的选项。但对webpack
Node.js等包裹创设筑工程具不打听的同窗不引入直接利用vue-cli搭建项目脚手架。
最简单易行的主意是在地头创建的 .html 文件中经过如下格局引进 Vue:

<script src="https://unpkg.com/vue/dist/vue.js"></script>

 

二.三 给成分的质量绑定数据

概念在Vue实例的data接口上的数据的绑定很利索,既能够绑定在DOM节点内部,也足以绑在性质上

 <div id="app" v-bind:title='message' v-bind:style='color' v-once>
     <a :href='url'>{{message}}</a>
  </div>

 

v-once命令能够让你执行一回性的插值,当数码变动时,插值处的剧情不会更新。但请留心那会影响到该节点上具有的数量绑定。

var vm = new Vue({
  el: '#app',
  data:{
    message: 'Google',
    color: 'color:green',
    url:'https://google.com'
  }
})

 

Mustache 不可能在 HTML
属性中动用,绑定数据到节点属性上时,须要利用v-bind指令。利用那几个命令将元素秋点div的
title属性和 Vue 实例的
message属性绑定到1起,从而确立数量与该属性值的绑定。v-bind命令可以缩写为二个冒号,如a标签中的v-bind:href="url"的缩写格局:href="url"

<button v-bind:disabled="someDynamicCondition">Button</button>

 

v-bind指令对布尔值的属性也使得 ——
即使基准被求值为 false 的话该属性会被移除。

什么是Vue?

相比较Angularjs和ReactJS,Vue.js一贯以轻量级,易上手被称道。MVVM的费用情势也使前端从原先的DOM操作中解放出来,大家不再要求在保障视图和多少的合并上花多量的日子,只要求关怀于data的扭转,代码变得越发简单保障。

2.2 输出纯HTML

使用{{message}}的mustache语法只好将数听他们证明为纯文本,为了输出HTML,可以行使v-html指令:

<div id = "app">
    <div v-html="text"></div>
</div>
new Vue({
     el: '#app', 
     data: {
       text:'<h1>hello</h1>'
      } 
 })

 

关于指令:

Vue.js的吩咐是以v-早先的,它们功能于HTML成分,指令提供了有的分裂常常的特征,将指令绑定在要素上时,指令会为绑定的指标元素添加一些非正规的一坐一起,我们得以将指令看作特殊的HTML特性(attribute)。

3.2 v-show也是原则渲染指令,和v-if指令不一样的是,使用v-show指令的要素始终会被渲染到HTML,它只是简单地为成分设置CSS的style属性。
<h1 v-show="name.indexOf('Walker') >= 0">Name: {{ name }}</h1>

在控制台打开,能够观察<h1>Name:WannaCry</h1>要素被安装了style="display:none"样式。

三.规则与循环

—恢复生机内容早先—

4. 处理用户点击

当用户点击页面,大家能够用 v-on指令绑定2个风浪监听器,通过它调用大家在Vue
实例中定义的格局:

<div class="title">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">反转消息</button>
</div>

v-on指令用于给监听DOM事件,它的用语法和v-bind是接近的。

new Vue({
   el: '.title',
   data: {
       message: 'Hello Vue.js!'
      },
    methods: {
       reverseMessage: function () {
         this.message = this.message.split('').reverse().join('')
         //split()用于将字符串转化为数组
         //reverse()用于颠倒数组中元素顺序
         //join()用于将数组转化为字符串
      }
    }
 })
  v-on指令可以缩写为@符号。

 

—复苏内容甘休—

 Vue.js 与 Angular.js
分外相似,只要学过了Angular.js然后在学Vue.js就可怜的简练。

二.一文本插值达成数据绑定

Vue.js有多种数码绑定的语法,最基础的样式是文本插值,使用mustache语法,在运营时{{ message }}会被数据对象的message属性替换,所以页面上会输出”Hello
World!”。

<div id="app">
  {{ message }}
</div>
//这是定义视图View
 new Vue({
     el: '#app', //指向view 将Vue实例挂载
     data: {
       message: 'Hello World!';
      } //指向model
 })
// 用来连接 View 与 Model

 

3.一 依据标准表明式的值来推行成分的插入大概去除行为的是v-if指令:  
<div id="app">
  <h1 v-if="num > 0">Num: {{ num }}</h1>
  <p v-if="seen">now you see me</p>
</div>
var app = new Vue({
  el: '#app',
  data: {
    num:12,
    seen: true,
    name:'WannaCry'
  }
})

 

v-if指令能够绑定二个属性值为布尔型的性质,当班值日为真时,成分将呈现,反之则没有。假诺在控制台设置app.seen = false,你会意识页面上的“now
you see me ”消失了。

其1例子演示了大家不仅可以绑定 DOM 文本到多少,也足以绑定
DOM 结构到多少。而且,Vue 也提供三个强大的连结效果系统,能够在 Vue
插入/更新/删除成分时自动应用连接效果

3.3 可以用v-else指令为v-if充分四个“else块”。
<div id="app">
   <h1 v-if="age >= 25">Age: {{ age }}</h1>
   <h1 v-else>Name: {{ name }}</h1>
</div>

 

  • v-else要素必须及时跟在v-ifv-else-if要素的前面——不然它无法被识别。

    var vm = new Vue({

        el: '#app',
        data: {
           age:20,
           name: 'Alan Walker',
           sex: 'Man'
       }
    

    })

 

  • v-else要素是还是不是渲染在HTML中,取决于后面v-if的值true还是false
    如果v-if的值为false,则后面v-else的始末不会渲染到HTML。
3.4 数组数据循环渲染列表使用v-for指令:
<div class="title">
    <ul>
       <li v-for="todo in todos">
        {{ todo.text }}
       </li>
   </ul>
 </div>

 

  • v-for命令基于八个数组渲染贰个列表,它和JavaScript的遍历语法相似:
    v-for="todo in todos"
    todos是三个数组,todo是当前被遍历的数组成分。

    var app = new Vue({
    el: ‘.title’,

    data: {
      //定义todos数组
      todos: [
        { text: 'study hard' },
        { text: 'find a girlfriend' },
         { text: 'around the world' }
      ]
    

    }
    })

 

页面展现如下:

  • study hard
  • find a girlfriend
  • around the world

操纵台里,输入 app.todos.push({ text: 'coding' }),你会意识列表中新添加了1项。