vue.js的一些知识点
1、
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="app">
<span>{{count}}</span>
<button @click="inc">+</button>
</div> <script>
var app = new Vue({
// 1.
// data () {
// return {count: 0}
// }, // 2.
// data: {
// count: 0
// }, // 3.
data: function() {
return {
count:
}
}, methods: {
inc () {this.count++}
}
})
app.$mount('#app')
</script>
</body>
</html>
上述的data有三种写法，都能够运行，那有什么区别呢？
首先，1是3的语法糖，是新的ES6语法，和3一摸一样。
1和2的区别：引用官网，简而言之，在app = new Vue对象时，没什么区别，因为你app对象不会被复用。但是在组件中，因为可能在多处调用同一组件，所以为了不让多处的组件共享同一data对象，只能返回函数。
使用组件时，大多数可以传入到 Vue 构造器中的选项可以在注册组件时使用，有一个例外： data 必须是函数。 实际上，如果你使用的不是函数，那么 Vue 会在控制台发出警告，告诉你在组件中 data 必须是一个函数。
下面的例子会让所有的组件都同时发生变化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="example-2">
<simple-counter></simple-counter>
<simple-counter></simple-counter>
<simple-counter></simple-counter>
</div> <script>
var data = { counter: }
Vue.component('simple-counter', {
template: '<button v-on:click="counter += 1">{{ counter }}</button>',
// data 是一个函数，因此 Vue 不会警告，
// 但是我们为每一个组件返回了同一个对象引用
data: function () {
return data
}
})
new Vue({
el: '#example-2'
})
</script>
</body>
</html>
由于这三个组件共享了同一个 data ， 因此增加一个 counter 会影响所有组件！我们可以通过为每个组件返回新的 data 对象来解决这个问题：
data: function () {
return {
counter:
}
}
https://cn.vuejs.org/v2/guide/components.html#data-必须是函数
https://segmentfault.com/q/1010000007910818?_ea=1490198
2、
渐进式框架、采用自底向上增量开发（可以查看前面的文章）
核心思想：响应的数据绑定和组合的视图组件
在没有接触 DOM 的情况下更新了应用的状态 - 所有的 DOM 操作都由 Vue 来处理，你写的代码只需要关注基本逻辑。v-on可以实现。
注意每个 Vue 实例都会代理其 data 对象里所有的属性，只有这些被代理的属性是响应的。如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。
3、
不仅可以绑定 DOM 文本到数据，也可以绑定 DOM 结构到数据（v-if）。
需要注意的是：v-if不能绑定在所挂载的元素上，比如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue组件</title>
</head>
<body>
<div id="app" title="text" v-if="type">
{{message}} {{text}}
</div>
<script src="http://cdn.jsdelivr.net/vue/1.0.16/vue.js"></script>
<script>
var mes = {
message:"hello"+ new Date(),
text:"world"
}
var app = new Vue({
el:"#app",
data:mes,
type:true
})
</script>
</body>
</html>
这样会报错：
vue.js的一些知识点的更多相关文章
- Vue.js中前端知识点总结笔记
1.框架和库的区别: 框架:framework 有着自己的语法特点.都有对应的各个模块库 library 专注于一点 框架的好处: 1.提到代码的质量,开发速度 2.提高代码的复用率 3.降低模块之间 ...
- vue.js 知识点（四）
看完了vue.js的官方文档,大概对这些知识有了那么一点的了解了,但是很多具体的运用还不太清楚,现在就总结一下,关于其中的一些知识点的运用: v-bind: 动态绑定指令,默认情况下,是给html ...
- vue.js 一些知识点
vue.js 也是试图层的运用方法,跟react的方法类似,不过也有许多的不同地方: 1.vue.js 对于数据也是用{{ }} 进行数据更新: 2.vue.js 使用 v-html 指令用于输出 h ...
- 【前端芝士树】Vue.js面试题整理 / 知识点梳理
[前端芝士树] Vue.js 面试题整理 MVVM是什么? MVVM 是 Model-View-ViewModel 的缩写. Model代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑. ...
- Vue.js知识点总结
1. Vue.js简介 1.1 Vue.js简介 1.2 创建一个vue实例 2. Vue.js基础 2.1 模板语法 2.2 环境搭建 2.3 生命周期钩子
- Vue.js——60分钟组件快速入门（上篇）
组件简介 组件系统是Vue.js其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用,任意类型的应用界面都可以抽象为一个组件树: 那么什么是组件呢?组件可以扩展HTML ...
- Vue.js——60分钟组件快速入门（下篇）
概述 上一篇我们重点介绍了组件的创建.注册和使用,熟练这几个步骤将有助于深入组件的开发.另外,在子组件中定义props,可以让父组件的数据传递下来,这就好比子组件告诉父组件:"嘿,老哥,我开 ...
- 利用Vue.js实现拼图游戏
之前写过一篇<基于Vue.js的表格分页组件>的文章,主要介绍了Vue组件的编写方法,有兴趣的可以访问这里进行阅读:http://www.cnblogs.com/luozhihao/p/5 ...
- 前端开发之走进Vue.js
Vue.js作为目前最热门最具前景的前端框架之一,其提供了一种帮助我们快速构建并开发前端项目的新的思维模式.本文旨在帮助大家认识Vue.js,了解Vue.js的开发流程,并进一步理解如何通过Vue.j ...
随机推荐
- go interface
//所有的结构体 都实现了空接口 //接口类型转换 结构体变量 = 接口名(实现接口的结构体变量) 只能高级转为低级 就是转前的接口中方法在转后接口中都有实现 package main import ...
- CentOS安装Maven
现有的一个项目使用了Maven来管理,源代码放到了Subversion中.虽然Maven管理项目很方便,但是部署起来还是很麻烦的.先要在本地生成项目jar包,上传到服务器,然后再重启服务.如果在服务器 ...
- Node中的定时器详解
在大多数的业务中,我们都会有一些需求,例如几秒钟实现网页的跳转,几分钟对于后台数据进行清理,node与javascript都具有将代码延迟一段时间的能力.在node中可以使用三种方式实现定时功能:超时 ...
- C语言猜数字游戏
猜数字游戏,各式各样的实现方式,我这边提供一个实现方式,希望可以帮到新手. 老程序猿就不要看了,黑呵呵 源代码1 include stdio.h include stdlib.h include ti ...
- asp.net mvc 权限过滤和单点登录（禁止重复登录）
1.权限控制使用controller和 action来实现,权限方式有很多种,最近开发项目使用控制控制器方式实现代码如下 /// <summary> /// 用户权限控制 /// < ...
- 全局变量都是window对象的属性
var x = "haha"; var test = function(){ alert(this.x); } 上述,则会弹出 haha的值. 因为在JavaScript的变量作 ...
- ajax两张传输数据方式
encodeURI() 函数可把字符串作为 URI 进行编码. 语法 encodeURI(URIstring) 参数 描述 URIstring 必需.一个字符串,含有 URI 或其他要编码的文本. 返 ...
- 两个坑-Linux下Network-Manager有线未托管-DNS resolv.conf文件开机被清空
Linux里面有两套管理网络连接的方案: 1./etc/network/interfaces(/etc/init.d/networking) 2.Network-Manager 两套方案是冲突的,不能 ...
- Word2016(2013)怎么从任意页插入起始页码
添加页码 1 小知识:双击任意页的页脚或页眉区域,激活页眉页脚设计界面.双击文档正文区域,返回正文编辑界面. 2 双击任意页的页脚或页眉区域,激活页眉页脚设计界面.单击"页码" ...
- eclipse 快捷键大全（转载）
Ctrl+1 快速修复(最经典的快捷键,就不用多说了)Ctrl+D: 删除当前行 Ctrl+Alt+↓ 复制当前行到下一行(复制增加)Ctrl+Alt+↑ 复制当前行到上一行(复制增加)Alt+↓ 当 ...