一、写在前面

  隔了这么久才来出Vue的第二篇文章,真是堕落了,自己先惩罚下/(ㄒoㄒ)/~~
  回过头看自己第一篇相关文章《初试 Vue.js》(http://www.cnblogs.com/anniey/p/6307138.html),简直惨不忍睹、不忍直视、辣眼睛,怎么可以这么啰嗦,废话好多哦,没脸看下去了~(o´・ェ・`o)
  都说入一门语言写好hello wrold开始,我上篇文章就已经打好这个头啦,不管是Vue1,还是2,现在咱们继续╰(*°▽°*)╯

二、起步

  1.简单的方式
    创建好一个html文件,通过script的方式引入,如下:
    <script src="https://unpkg.com/vue"></script>
  2.其他的方式
    参考官网给出的选项:
    https://cn.vuejs.org/guide/installation.html

三、数据的渲染

  Vue.js的核心是采用简洁的模板语法来声明式的将数据渲染进DOM!

  例1:

<div id="app">{{ message }}</div>
   <script type="text/javascript">
var app=new Vue({
el:"#app",
data:{
message:"hello vue"
}
})
</script>

  这已经生成了一个vue应用,现在数据和DOM已经绑定在一起,只要修改app.message,相应的也会更新DOM!

  例2:

    <div id="app_2">
<span v-bind:title="message">
Hover your mouse over me for a few seconds to see my dynamically bound title!
</span>
</div>
     <script type="text/javascript">
var app_2=new Vue({
el:'#app_2',
data:{
message:'You loaded this page on '+new Date()
}
})
</script>

  例子2涉及到了Vue的特殊属性 v-bind 指令,也会在相应的DOM元素上渲染!

四、条件与循环

  Vue不仅可以绑定DOM文本到数据,也可以绑定DOM结构到数据!

  1.条件

    我们可以使用其中的 v-if 指令达到条件设置,而在实际应用中控制切换一个元素的显示也很简单。

    例3:

     <div id="app_3">
<p v-if="flags">Now you see me</p>
</div>
     <script>
var app_3=new Vue({
el:'#app_3',
data:{
flags:true
}
})
</script>

    同样的可以修改data属性来达到响应。

  2.循环

    每个指令都有特殊的功能,v-for 指令可以绑定数组的数据来渲染一个列表!

    例4:

     <div id="app_3_2">
<ul>
<li v-for="todo in todos">
{{todo.text}}
</li>
</ul>
</div>
     var app_3_2=new Vue({
el:'#app_3_2',
data:{
todos:[
{ text:'Learn JavaScript' },
{ text:'Learn Vue' },
{ text:'Learn Other ' }
]
}
})

  打开控制台,输入 app_3_2.todos.push({ text: '新项目' }),你会发现列表中添加了一个新项。

五、双向绑定

  Vue 提供了一个  v-model 指令,它能轻松实现表单输入和应用状态之间的双向绑定。

  例5:

     <div id="app5">
<input type="text" v-model="msg2" />
<p>{{msg2}}</p>
</div>
     var app5 = new Vue({
el: '#app5',
data: {
  msg2: '# hello '
  }
})

六、界面交互

  为了让用户和你的应用进行互动,我们可以用  v-on  指令绑定一个事件监听器,通过它调用我们 Vue 实例中定义的方法!

  例6:

     <div id="app6">
<p>{{message}}</p>
<button v-on:click="reverseMessage">Reverse Message</button>
</div>
     var app6=new Vue({
el:'#app6',
data:{
message:'Hello Vue.js!'
},
methods:{
reverseMessage:function(e){
this.message=this.message.split('').reverse().join('');
}
}
})

  注意:在methods方法中,只更新了状态,没有触动到DOM!

七、组件构建(简单版)

  一定要先注册完组件,再来实例化!

  一定要确保在初始化根实例之前注册了组件!

  否则未注册就使用会报错的!  

  组件比较强大,可以扩展,封装可重用代码,就是比较腻害(*@ο@*) 哇~一定要好好的熟悉熟悉它!

 例7:

     <div id="app_7">
<ol>
<todo-item v-for="list in itemsList" v-bind:todo="list"></todo-item>
</ol>
</div>
     Vue.component('todo-item',{
props:['todo'],
template:'<li>{{todo.text}}</li>'
});
var app_7=new Vue({
el:'#app_7',
data:{
itemsList:[
{text:'Vegetables'},
{text:'Cheese'},
{text:'Whatever else humans are supposed to eat'}
]
}
})

  组件是很重要的一部分,当你熟悉完以上的内容后要好好研究组件系统,其中涉及到许多内容需要更详细的掌握。

  在实际项目中使用时,多个页面有相同的part,组件复用简直厉害的不要不要~O(∩_∩)O~~

---------------------------------------------------------------

vue的基本功能介绍就到这里了,谢谢思密达O(∩_∩)O~~

多多指教n(*≧▽≦*)n

Vue.js 基本功能了解的更多相关文章

  1. Vue.js 基本功能了解一下~

    一.写在前面 隔了这么久才来出Vue的第二篇文章,真是堕落了,自己先惩罚下/(ㄒoㄒ)/~~ 回过头看自己第一篇相关文章<初试 Vue.js>(http://www.cnblogs.com ...

  2. 使用vue.js路由踩到的一个坑Unknown custom element

    在配合require.js使用vue路由的时候,遇到了路由组件报错: “vue.js:597 [Vue warn]: Unknown custom element: <router-link&g ...

  3. Vue.js 很好,但会比 Angular 或 React 更好吗?

    文章转自:http://www.oschina.net/translate/vuejs-is-good-but-is-it-better-than-angular-or-rea Vue.js 是一个用 ...

  4. CI 结合 vue.js 的搜索功能模块

    CI 结合 vue.js 的搜索功能模块 最近在有优化公司后台的某个模块的搜索功能优化 原先的是这个样子的,很是单调: 老大给我找个图希望我能弄成这样子: 经过不断修改,最后成了这样子 是不是比以前好 ...

  5. vue.js实战——购物车练习(包含全选功能)

    vue.js实战第5章 54页的练习1 直接放代码好了,全选的部分搞了好久,代码好像有点啰嗦,好在实现功能了(*^▽^*) HTML: <!DOCTYPE html> <html l ...

  6. 非node环境下的vue.js 实现简单的购物车计算功能 样式请无视

    都说vue的双向数据绑定好用,自己用了下,感觉做购物车没想象中好用.自己的实现如下: <!DOCTYPE html> <html lang="en"> &l ...

  7. vue.js核心最基本的功能

    Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统: , text: , text: , text: '随便其它什么人吃的东西' } ] }}) 蔬菜 奶酪 随便其 ...

  8. vue.js实现购物车功能

    购物车是电商必备的功能,可以让用户一次性购买多个商品,常见的购物车实现方式有如下几种: 1. 用户更新购物车里的商品后,页面自动刷新. 2. 使用局部刷新功能,服务器端返回整个购物车的页面html 3 ...

  9. 【Vue.js实战案例】- Vue.js递归组件实现组织架构树和选人功能

    大家好!先上图看看本次案例的整体效果. 浪奔,浪流,万里涛涛江水永不休.如果在jq时代来实这个功能简直有些噩梦了,但是自从前端思想发展到现在的以MVVM为主流的大背景下,来实现一个这样繁杂的功能简直不 ...

随机推荐

  1. Telnet的开启及使用

    1首先在控制面板找到程序和功能,双击点开. 2,点击打开或关闭WINDOWS功能 3勾选上这两项 点击确定即可. ------------------------------------------- ...

  2. 侯捷STL学习(一)

    开始跟着<STL源码剖析>的作者侯捷真人视频,学习STL,了解STL背后的真实故事! 视频链接:侯捷STL 还有很大其他视频需要的留言 第一节:STL版本和重要资源 STL和标准库的区别 ...

  3. coreCLR系列随笔 之ClrJit项目之alloc.cpp文件分析(1)

    首先声明,自己对CLR了解得不多,只是个人爱好,可能有错误,请指出,文件源码如下(可能不是最新的) // // Copyright (c) Microsoft. All rights reserved ...

  4. 运行容器的最佳实践 - 每天5分钟玩转 Docker 容器技术(24)

    按用途容器大致可分为两类:服务类容器和工具类的容器. 1. 服务类容器以 daemon 的形式运行,对外提供服务.比如 web server,数据库等.通过 -d 以后台方式启动这类容器是非常合适的. ...

  5. axis调用webservice的简单方法

    package com.service; import org.apache.axis.client.Call; import org.apache.axis.client.Service; publ ...

  6. Java对象与类中的一个小练习

    一直在Eclipse里做练习.是做一个练习,执行一个的那种.刚刚学习了Java的对象与类,练习中把类和执行放在同一包下的两个.java文件里面了.是可以执行的.(Get) 相关代码: public c ...

  7. rsync的用法

    一.用法例子 1.增量备份本地文件#rsync -av ebook/ tmp/ //注意:文件名中最好不要有 :#rsync -avzrtopgL --progress /src /dst 2.本地和 ...

  8. [转]Java多线程学习(吐血超详细总结)

    转自:http://www.mamicode.com/info-detail-517008.html 本文主要讲了Java中多线程的使用方法.线程同步.线程数据传递.线程状态及相应的一些线程函数用法. ...

  9. Android的UI调优

    对于一个App的UI而言,在流畅性上的改进目标其实就是降低屏幕绘制的延迟,创建流畅和稳定的帧率以避免卡顿. 在理想情况下,全部的测量.布局和绘制的时间最好在16ms以内,这样才能保证屏幕运行的顺畅性. ...

  10. phpcms v9模版调用代码

    首页调用栏目{pc:content action="category" siteid="$siteid" num="15" order=&q ...