vue.js基础知识篇(1):简介、数据绑定
目录
第一章: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):简介、数据绑定的更多相关文章
- vue.js基础知识篇(6):组件详解
第11章:组件详解 组件是Vue.js最推崇也最强大的功能之一,核心目标是可重用性. 我们把组件代码按照template.style.script的拆分方式,放置到对应的.vue文件中. 1.注册 V ...
- vue.js基础知识篇(2):指令详解
第三章:指令 1.语法 指令以v-打头,它的值限定为绑定表达式,它负责的是按照表达式的值应用某些行为到DOM上. 内部指令有v-show,v-else,v-model,v-repeat,v-for,v ...
- vue.js基础知识篇(7):表单校验详解
目录 网盘 第12章:表单校验 1.npm安装vue-validator $ npm install vue-validator 代码示例: var Vue=require("vue&quo ...
- vue.js基础知识篇(5):过渡、Method和Vue实例方法
第8章:过渡 1.CSS过渡 2.JavaScript过渡 3.渐进过渡 第9章:method Vue.js的事件一般通过v-on指令配置在HTML中,虽然也可以在js的代码中使用原生的addEven ...
- vue.js基础知识篇(4):过滤器、class与style的绑定2
代码下载:网盘 欢迎私信 第一章:过滤器 过滤器是对数据进行处理并返回结果的函数. 1.语法 语法是使用管道符"|"进行连接.过滤器可以接收参数,跟在过滤器后面,带引号的参数被当做 ...
- vue.js基础知识篇(3):计算属性、表单控件绑定
第四章:计算属性 为了避免过多的逻辑造成模板的臃肿不堪,可使用计算属性来简化逻辑. 1.什么是计算属性 <!DOCTYPE html><html lang="en" ...
- Vue.js基础知识
<!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml&q ...
- 简单易懂的 Vue.js 基础知识 ！
根 vue 实例 let viewModel = new Vue({ // 包含数据.模板.挂载元素.方法.生命周期钩子等选项 }) Hello Wrold <!-- 这是我们的 View - ...
- Vue.js 基础知识
0. Vue.js 是轻量级的MVVM框架: 1. index.html:<app></app>:组件载入:入口文件会默认调用一个 main.js: 2. App.vue:入口 ...
随机推荐
- 利用ssh反向代理以及autossh实现从外网连接内网服务器
前言 最近遇到这样一个问题,我在实验室架设了一台服务器,给师弟或者小伙伴练习Linux用,然后平时在实验室这边直接连接是没有问题的,都是内网嘛.但是回到宿舍问题出来了,使用校园网的童鞋还是能连接上,使 ...
- python3之微信文章爬虫
前提: python3.4 windows 作用:通过搜狗的微信搜索接口http://weixin.sogou.com/来搜索相关微信文章,并将标题及相关链接导入Excel表格中 说明:需xlsxwr ...
- jsp变量的使用规则
jsp是一种弱类型的交而不能语音,虽然看似没有像强类型语言那么多的代码规范,但是在实际使用的过程当中依然有不少的问题.下面就简单的梳理一下. 1.首先,jsp是一种弱类型的脚本语言,变量在使用之前无需 ...
- Asp.Net MVC-4-过滤器1：认证与授权
基础 过滤器体现了MVC框架中的Aop思想,虽然这种实现并不完美但在实际的开发过程中一般也足以满足需求了. 过滤器分类 依据上篇分析的执行时机的不同可以把过滤器按照实现不同的接口分为下面五类: IAu ...
- 29. leetcode 167. Two Sum II - Input array is sorted
167. Two Sum II - Input array is sorted Given an array of integers that is already sorted in ascendi ...
- RSA简介(二)——模幂算法
RSA最终加密.解密都要用到模乘的幂运算,简称模幂运算. 回忆一下RSA,从明文A到B B=Ae1%N 对B解密,就是 A=Be2%N 其中,一般来说,加密公钥中的e1一般会比较小,取65537居多, ...
- vue指令v-pre示例解析
v-pre会跳过该元素及其子元素的编译过程,显示原始标签. <div id="app"> <span v-pre>{{msg}} 这句不会编译</sp ...
- （转载）Stackoverflow评选的C++推荐书单
C++必读书籍推荐 (原链接:http://bestcbooks.com/recommended-cpp-books 2013-10-07) 本文内容来自国外著名编程问答网站Stackoverflow ...
- Jenkins安装与配置
Jenkins安装与配置 2 Jenkins安装 在最简单的情况下,Jenkins 只需要两个步骤: 1.下载最新的版本(一个 WAR 文件).Jenkins官方网址: http://Jenkins- ...
- iOS tableview group时头尾视图间隔大小
解决: 一,当使用tableview的格式为group时 1.先设置 tableview.sectionHeaderHeight = 0.00001; tableview.sectionFooterH ...