Vue快速入门

21次阅读

共计 1730 个字符，预计需要花费 5 分钟才能阅读完成。

...### 最近想搞一些微信小程序，顺便了解一下 Vue。15 年看过一点 angular，一直没有实践的时候，这次用国人学的框架试试手。
学习新事物的三个单词 W(why)W(whar)H(how), 就从这三个单词入手

VUE 是一种 MVVM 架构，我们在改变数据的时候不需要再去操作 DOM，而是直接改变数据即可，Angular 等都支持这种方式。
而且它还是国产，方便我们去学习。

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

因为是国人开发，文档更加友好，可以从官网入门。

下面做一些学习记录，记录一下学习过程。

<div id='app'>
    <p>{{msg}}</p>
</div>
 var  app = new Vue({
        el:'#app',
        data:{msg:'hello Vue.js By Liuser'}
    });
此处 dom 中 ID 与 VUE 进行绑定，在 data 数据发生改变的时候，dom 中的数据会相应的进行改变

绑定元素与绑定 DOM 不同，使用一个指令 v -bind。

指令带有前缀 v-，以表示它们是 Vue 提供的特殊特性，它们会在渲染的 DOM 上应用特殊的响应式行为。在这里，该指令的意思是：“将这个元素节点的 title 特性和 Vue 实例的 message 属性保持一致”。


<!-- 缩写 -->
#这里也可以使用缩写形式  <span :title="message">
<div id="app-2">
    <span v-bind:title="message">
          鼠标悬停几秒钟查看此处动态绑定的提示信息！</span>
</div>
 var app2 = new Vue({
       el:'#app-2',
       data:{message:'页面加载于' +new Date().toLocaleString()}
   })

条件语句使用 v -if

<div id="app-3">
    <p v-if="flag"> 显示 </p>
</div>
]
    var app3 = new Vue({
        el: '#app-3',
        data: {flag: true}
    })
这时，默认为显示，如果使用控制台手动修改 app3.flag=false, 则会隐藏

循环语句使用 v -for

<div id="app-4">
    <ui>
        <li v-for="item in list">
            {{item.text}}
        </li>
    </ui>
</div>
var app4 = new Vue({
    el: '#app-4',
    data:{
        list:[{text:'javascript'},
            {text:'java'},
            {text:'php'},
            {text:'c'},
            {text:'c++'},
        ]
    }
});
在控制台里，输入 app4.list.push({text: '新项目'})，你会发现列表最后添加了一个新项目。

使用 v -on 添加事件


#这里也可以使用缩写
 <button @click="reverseMessage"> 逆转消息 </button>
<div id="app-5">
    <p>{{message}}</p>
    <button v-on:click="reverseMessage"> 逆转消息 </button>
</div>
 var app5 =  new Vue({
        el:'#app-5',
        data:{message:'Hello Vue.js'},
        methods:{reverseMessage:function () {this.message = this.message.split('').reverse().join('');
            }
        }
    });

<div id="app-6">
  <p>{{message}}</p>
  <input v-model="message">
</div>
var app6 = new Vue({
  el: '#app-6',
  data: {message: 'Hello Vue!'}
})
在输入的时候，会自动映射到 p 标签内

正文完

发表至： Uncategorized

2018-03-26

0