目录
第一章:vue.js是什么？ 
第二章:数据绑定
第三章:指令
第四章:计算属性
第五章:表单控件绑定
代码
链接: http://pan.baidu.com/s/1qXCfzRI 密码: 5j79

第一章：vue.js是什么？

1.vue.js是MVVM框架

MVVM的代表框架是Angular.js，以及vue.js。

MVVM的view和model是分离的，View的变化会自动更新到ViewModel上，ViewModel的变化会自动同步到View上显示。这种自动同步依赖于ViewModel的属性实现了Observer。

2.它与angular.js的区别

相同点:都支持指令、过滤器和双向绑定，都不支持低端浏览器。

不同点:

(1)学习成本不一样，比如ng有依赖注入。

(2)性能上ng依赖对数据做脏检查，所以watcher越多越慢。vuel.js依赖于追踪的观察并且使用异步队列更新，所以数据都是独立触发的。

3.vue.js的安装

可以通过Script标签引入vue.js文件，可以通过npm安装。

4.第一个hello world程序

(1)通过npm安装vue的使用

step1:

$ npm init

$ npm install  vue --save-dev

step2:

//app.js代码

var vue=require("vue");

console.log(vue);

运行，

$ node app.js

OK。

(2)直接通过script标签引入vuel.js

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>vue.js</title>

</head>

<body>

   <div id="didi-navigator">

       <ul>

           <li v-for="tab in tabs">

               {{tab.text}}

           </li>

       </ul>

   </div>

   <script src="js/vue.js"></script>

   <script>

       new Vue({

           el:"#didi-navigator",

           data:{

               tabs:[

                   {text:"巴士"},

                   {text:"快车"},

                   {text:"顺风车"},

                   {text:"出租车"},

                   {text:"代驾"}

               ]

           }

       });

   </script>

</body>

</html>

第一个hello world程序

浏览器的显示效果是

第2章:数据绑定

1.语法

(1)类似angularjs的{{}}，插值

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <div id="app">

        <div>Text:{{text}}</div>

    </div>

    <script src="js/vue.js"></script>

    <script>

        new Vue({

            el:"#app",

            data:{

                text:"我是文本"

            }

        })

    </script>

</body>

</html>

可以看到如果text的值发生改变，文本中的值也会联动的变化。(竟然难过:(。书上说的使用星号实现单次渲染、3个大括号填入HTML片段，用1.0.24版本的控制台报错，说是不合法的表达式，说明这两种怪异的语法已经过时了。)

注意:vue指令和自身的特性是不可以插值的。

(2)表达式

表达式由js表达式和过滤器构成。过滤器本质是一个函数，要使用过滤器，要先写过滤符(|)。

关于大写过滤器的例子。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

     <title>Title</title>

</head>

<body>

<div id="app">

    <div>{{msg|uppercase}}</div>

</div>

<script src="js/vue.js"></script>

<script>

    var vm=new Vue({

        el:"#app",

        data:{

            msg:"eeeeeeeqeeecfff"

        }

    })

</script>

</body>

</html>

显示效果:

关于过滤器的到底有哪些内置的，可以通过查看源代码获取到。搜索"var filters={"，就能找到源代码了。

(3)指令

指令是带有v-前缀的特殊特性，其值限定为绑定表达式，也就是js表达式和过滤器，那么当表达式的值发生变化时，这个变化也会反映到DOM上。

2.可以通过Vue.config配置数据绑定的语法

vue.js中数据绑定的语法被设计为可配置。

//delimiters搜索源码

var delimiters = ['{{', '}}'];

var unsafeDelimiters = ['{{{', '}}}'];

//...............

delimiters: { /**

                   * Interpolation delimiters. Changing these would trigger

                   * the text parser to re-compile the regular expressions.

                   *

                   * @type {Array<String>}

                   */

      get: function get() {

        return delimiters;

      },

      set: function set(val) {

        delimiters = val;

        compileRegex();

      },

      configurable: true,

      enumerable: true

    },

源代码说的很清楚，configurable是可配置的。

核心代码就一句:Vue.config.delimiters=["<%","%>"]。delimiters是config对象的属性，规定了默认的文本插值的分隔符。例子如下:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div id="app">

    <div><%msg%></div>

</div>

<script src="js/vue.js"></script>

<script>

    Vue.config.delimiters=["<%","%>"]

    var vm=new Vue({

        el:"#app",

        data:{

            msg:"eeeeeeeqeeecfff"

        }

    })

</script>

</body>

</html>

成功！

vue.js基础知识篇(1):简介、数据绑定的更多相关文章

  1. vue.js基础知识篇(6):组件详解

    第11章:组件详解 组件是Vue.js最推崇也最强大的功能之一,核心目标是可重用性. 我们把组件代码按照template.style.script的拆分方式,放置到对应的.vue文件中. 1.注册 V ...

  2. vue.js基础知识篇(2):指令详解

    第三章:指令 1.语法 指令以v-打头,它的值限定为绑定表达式,它负责的是按照表达式的值应用某些行为到DOM上. 内部指令有v-show,v-else,v-model,v-repeat,v-for,v ...

  3. vue.js基础知识篇(7):表单校验详解

    目录 网盘 第12章:表单校验 1.npm安装vue-validator $ npm install vue-validator 代码示例: var Vue=require("vue&quo ...

  4. vue.js基础知识篇(5):过渡、Method和Vue实例方法

    第8章:过渡 1.CSS过渡 2.JavaScript过渡 3.渐进过渡 第9章:method Vue.js的事件一般通过v-on指令配置在HTML中,虽然也可以在js的代码中使用原生的addEven ...

  5. vue.js基础知识篇(4):过滤器、class与style的绑定2

    代码下载:网盘 欢迎私信 第一章:过滤器 过滤器是对数据进行处理并返回结果的函数. 1.语法 语法是使用管道符"|"进行连接.过滤器可以接收参数,跟在过滤器后面,带引号的参数被当做 ...

  6. vue.js基础知识篇(3):计算属性、表单控件绑定

    第四章:计算属性 为了避免过多的逻辑造成模板的臃肿不堪,可使用计算属性来简化逻辑. 1.什么是计算属性 <!DOCTYPE html><html lang="en" ...

  7. Vue.js基础知识

    <!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml&q ...

  8. 简单易懂的 Vue.js 基础知识 ！

    根 vue 实例 let viewModel = new Vue({ // 包含数据.模板.挂载元素.方法.生命周期钩子等选项 }) Hello Wrold  <!-- 这是我们的 View - ...

  9. Vue.js 基础知识

    0. Vue.js 是轻量级的MVVM框架: 1. index.html:<app></app>:组件载入:入口文件会默认调用一个 main.js: 2. App.vue:入口 ...

随机推荐

  1. 基于Entity Framework的自定义分页，增删改的通用实现

    简介 之前写个一个基于Dapper的分页实现,现在再来写一个基于Entity Framework的分页实现,以及增删改的通用实现. 代码 还是先上代码:https://github.com/jinwe ...

  2. JavaWeb开发技术基础概念回顾篇

    JavaWeb开发技术基础概念回顾篇 第一章 动态网页开发技术概述 1.JSP技术:JSP是Java Server Page的缩写,指的是基于Java服务器端动态网页. 2.JSP的运行原理:当用户第 ...

  3. centos下-MariaDB的安装

    安装命令: yum install mariadb mariadb-server 服务命令: systemctl start|stop|restart mariadb root用户密码设置 mysql ...

  4. log4j（七）——log4j.xml简单配置样例说明

    一:测试环境与log4j(一)--为什么要使用log4j?一样,这里不再重述 二:老规矩,先来个栗子,然后再聊聊感受 (1)这里栗子有一点特别呀!给出了包名唉!想必有用,是的,配置文件中要特别说明一下 ...

  5. 【D3】D3学习轨迹-----学习到一定层度了再更新

    1.  首先了解SVG的基本元素 http://www.w3school.com.cn/svg/ 2.  了解d3的专有名词  http://www.cnblogs.com/huxiaoyun90/p ...

  6. Ubuntu中使用iptables

    (一) 设置开机启动iptables # sysv-rc-conf --level 2345 iptables on (二) iptables的基本命令 1. 列出当前iptables的策略和规则 # ...

  7. ORA-12516: TNS: 监听程序找不到符合协议堆栈要求的可用处理程”的异常

    简单说明:我们开发时多人开发,会频繁访问服务器数据库,结果当连接数大的时候,就会报ora-12516的错误,ORA-12516: TNS: 监听程序找不到符合协议堆栈要求的可用处理程"的异常 ...

  8. [COGS 0011] 运输问题1

    11. 运输问题1 ★★☆   输入文件:maxflowa.in   输出文件:maxflowa.out   简单对比时间限制:1 s   内存限制:128 MB [问题描述]     一个工厂每天生 ...

  9. Java 三目运算符表达式的一些问题

    最近在处理一个需求,需求描述如下:对数据库中查询出来的数据的某一个字段做一个简单处理.处理方式是:如果该字段的值(取值范围0~4,有可能为null)等于0,那么默认处理成1. 测试代码如下: publ ...

  10. 暑假学习计划：Day_1.JSP&Servlet&Tocat 环境搭建到基础的认识。

    1.了解JSP和Servlet(百度了解即可). 2.了解B/S和C/S.分别是  浏览器/服务器  和  客户端/服务器. 其中 B/S 被称为瘦模式(主流模式). 3.了解并下载Tomcat服务器 ...