vue.js初学(一) vue的入门编程
1:首先引入vue.js
2:点击事件
<div id='clickVue'>
<p>{{message}}</p>
<button v-on:click="reverseMessage">逆转文字</button>
</div>
var app = new Vue({
el: "#clickVue",
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
在reverseMessage方法中,我们更新了应用的状态,但没有操作dom节点,所有的dom操作都由vue来处理,你只需要注意编写底层逻辑。
3:组件化应用构建
(1):在vue里,一个组件本质上是一个有用预定义选项的一个vue实例,在vue中注册组件:
vue.component('todo-item',{
template: "<li>这是一个正在被注册的组件</li>"
})
现在你可以用它构建另一个组件模板:
<ol>
// 创建一个 todo-item 组件的实例
<todo-item></todo-item>
</ol>
全部代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="vue.js"></script>
</head>
<body>
<div id='componentTest'>
<todo-item></todo-item>
</div>
</body>
<script>
//注册模板
Vue.component('todo-item',{
template: "<li>这是一个模板</li>"
})
var app = new Vue({
el:'#componentTest'
})
</script>
</html>
上诉代码中:Vue.component()注册一个组件,在vue对象componentTest中,使用了这个组件。运行代码得到:
4:组件的绑定的值从父作用域获取
但是这样会为每个代办项渲染同样的文本,这样看起来并不炫酷,我们应该能将数据从父作用域传到子组件。下面修改一下组件的定义,使之能够接受一个属性。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="vue.js"></script>
</head>
<body>
<ol id='componentTest'>
<todo-item v-for='item in groceryList' v-bind:todo='item'></todo-item>
</ol>
</body>
<script>
//注册模板
Vue.component('todo-item',{
props:['todo'],
template: "<li>{{ todo.text }}</li>"
})
var app = new Vue({
el:'#componentTest',
data: {
groceryList: [
{
text: '素材'
},
{
text: '文章'
},
{
text:'单词'
}
]
}
})
</script>
</html>
代码分析:注册的组件为todo-item,在vue对象conponentTest中引用了这一组件,v-for=' item in groceryList ',是从父作用域(componentTest)中循环取groceryList内的值,并将todo与item绑定,
这样一来 todo.text可以理解为item.text in groceryList,循环取值,每次取到的是 ‘素材’,‘文章’,‘单词’三项。
如果没有{{todo.text}} 而是{{todo}},那么得到的是
整个代码分析:
明确需求:我们需要在todo-item中动态从父作用域获取数据。
首先我们需要在componentTest中引入组件todo-item,于是 我们就在body中写了:
<todo-item></todo-item>
其次 我们需要注册组件:
Vue.componet('todo-item' , {
template: " <li> {{ activeData }} </li> "
})
现在,我们想要组件todo-item循环显示一组动态数据,而这组数据来自其父作用域,而这个数据又是一组数组。于是,在todo-item组件中 写 v-for = item in groceryList ,此时并把todo绑定给item。
但是 我们需要将groceryList 中的数据循环显示出来,因为groceryList 的数据并不在注册的组件todo-item中,于是写了 v-for = item in groceryList 这样,从groceryList中取数据 ,我们可以通过控制台打印
可以看到 groceryList数据是在模板app中。
在注册todo-item时 我们增加其属性 props:【todo】,这个属性被组件用作了{{todo值}},在模板中 我们用v-bind: todo = item即是把item赋值给todo 那么这样一来item组件里的 {{todo.text}}就等于{{item.text}},所以 组件todo-item就从父作用域中获得到groceryList里的值。
我们已经设法将应用分割成了两个更小的单元,子单元通过props接口实现了与父单元的解耦。现在,我们进一步为todo-item组件实现更复杂的模板和逻辑的改进,而且不会影响到父单元。
我们可以想象一个大型应用中,组件的应用模板应该是什么样的
与自定义元素的关系
你可能已经注意到 Vue 组件非常类似于自定义元素——它是 Web 组件规范的一部分,这是因为 Vue 的组件语法部分参考了该规范。例如 Vue 组件实现了 Slot API 与 is
特性。但是,还是有几个关键差别:
Web 组件规范仍然处于草案阶段,并且尚无浏览器原生实现。相比之下,Vue 组件不需要任何补丁,并且在所有支持的浏览器(IE9 及更高版本)之下表现一致。必要时,Vue 组件也可以包装于原生自定义元素之内。
Vue 组件提供了纯自定义元素所不具备的一些重要功能,最突出的是跨组件数据流,自定义事件通信以及构建工具集成。
vue.js初学(一) vue的入门编程的更多相关文章
- Vue.js——60分钟组件快速入门(上篇)
组件简介 组件系统是Vue.js其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用,任意类型的应用界面都可以抽象为一个组件树: 那么什么是组件呢?组件可以扩展HTML ...
- 转: Vue.js——60分钟组件快速入门(上篇)
转自: http://www.cnblogs.com/keepfool/p/5625583.html Vue.js——60分钟组件快速入门(上篇) 组件简介 组件系统是Vue.js其中一个重要的概 ...
- Vue.js——60分钟组件快速入门
一.组件简介 组件系统是Vue.js其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用,任意类型的应用界面都可以抽象为一个组件树: 那么什么是组件呢?组件可以扩展HT ...
- 【转】Vue.js——60分钟组件快速入门(上篇)
文章作者:keepfool 文章出处:http://www.cnblogs.com/keepfool/ 组件简介 组件系统是Vue.js其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的 ...
- Vue.js——60分钟组件快速入门(上篇)二
来源:https://www.cnblogs.com/keepfool/p/5625583.html 组件简介 组件系统是Vue.js其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的小 ...
- Vue.js——60分钟组件快速入门(下篇)
概述 上一篇我们重点介绍了组件的创建.注册和使用,熟练这几个步骤将有助于深入组件的开发.另外,在子组件中定义props,可以让父组件的数据传递下来,这就好比子组件告诉父组件:"嘿,老哥,我开 ...
- Vue.js——60分钟组件快速入门(下篇)
转自:https://www.cnblogs.com/keepfool/p/5637834.html 概述 上一篇我们重点介绍了组件的创建.注册和使用,熟练这几个步骤将有助于深入组件的开发.另外,在子 ...
- Vue.js 2 vs Vue.js 3的实现 – 云栖社区
Vue.js 2 vs Vue.js 3的实现 – 云栖社区 vue.js核心团队已经讨论过将在Vue3实现的变化.虽然API不会改变,但是数据响应机制(译者注:对数据改变的监听和通知)发生了变化.这 ...
- vue.js最最最基础的入门案例
打算自己写一点vue.js从入门到进阶的笔记,方便一些新手从头开始开发的时候,可以参考一下. 写的或许是很简单的文章,提供给新手参考.暂时都是一些入门级别的. 以后会慢慢的加深,进阶,写出一些更好,更 ...
随机推荐
- MySql 5.7 详细参数说明
max_connections: 允许客户端并发连接的最大数量,默认值是151,一般将该参数设置为500-2000 max_connect_errors: 如果客户端尝试连接的错误数量超过这个参数设置 ...
- SOA 面向服务架构 阅读笔记(一)
Service Oriented Architecture 面向服务架构 学习笔记(一) 1.业务自由 1.1 在很多企业中,业务和IT技术是各自独立的,无法使用通用的统一语言进行管理. 1.2 ...
- CentOS 6.5 下vim 配置
1. 登录并进入你常用的用户名下,查看其主目录 命令: # su xxx $ cd xxx $ ls -a 2.查看并建立目录和文件 首先看你的主目录~/ 下是否有.vimrc文件,没有就输入指令 $ ...
- Ubuntu: 无法使用su命令
Ubuntu 无法使用su命令解决方案 在Ubuntu上编译Qt环境时发现无法使用su命令切换到root用户,通过网上查找发现解决方案如下: xt@xt-ubuntu:~$ su密码: su:认证失败 ...
- nginx location proxy pass
nginx: 192.168.1.23作为nginx反向代理机器 目标机器192.168.1.5上部署一个8090端口的nginx [root@localhost conf.d]# cat test. ...
- Oracle、Mysql、SqlServer创建表和给表和字段加注释
一.Oracle --创建表 create table test ( id varchar2(200) primary key not null, sort number, ...
- 搭建配置cacti,采集信息监控
安装cactilamp环境[iyunv@Cacti ~]#service iptables stop //关闭防火墙服务[iyunv@Cacti ~]#chkconfig iptables off / ...
- Linux FTP 上传一键脚本
下面来介绍一下这个 FTP 上传一键脚本 ftp_upload.sh. 用途:用于在Linux系统下搭建FTP客户端向FTP服务器端上传文件: 总结一下 ftp_upload.sh 特点:1.支持文件 ...
- MYSQL数据库字段命名及设计规范
1.设计原则 1) 标准化和规范化数据的标准化有助于消除数据库中的数据冗余.标准化有好几种形式,但 Third Normal Form(3NF)通常被认为在性能.扩展性和数据完整性方面达到了最好平衡. ...
- numpy里*与dot与multiply
一.* , dot() multiply() 1, 对于array来说,(* 和 dot()运算不同, * 和 multiply()运算相同) *和multiply() 是每个元素对应相乘 do ...