Vue入门2
欢迎转载，转载请注明出处。
前言
学习本系列Vue知识，需要结合本系列的一些demo。你可以查看我的 Github 或者直接下载 ZIP包 。
建议学习本系列之前已经会一个其他的前端框架，了解计算属性，数据绑定，模板语言等。零基础的话，看本教程可能不太适合。
上一篇文章已经讲了前六个demo。
七、Vue实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue-demos</title>
<script src="../vue.js"></script>
</head>
<body>
<!--
Vue实例
-->
<div id="app">
<p>{{ message }}</p>
<button v-on:click="sayHello">sayHello</button>
</div>
<script>
//每个 Vue应用都是通过构造函数 Vue 创建一个 Vue的根实例 启动的 var app = new Vue({});
//在实例化 Vue 时，需要传入一个选项对象，它可以包含数据data、模板template、挂载元素el、方法methods、生命周期钩子等选项
var app = new Vue({
el: '#app',
data: { //每个 Vue 实例都会代理其 data 对象里所有的属性
message: 'Hello Vue' //app.message = app.data.message
},
methods: {
sayHello: function(){
alert('hello');
}
},
created: function(){ //实例生命周期的不同阶段，如created、 mounted、 updated 、destroyed 。钩子的 this 指向调用它的 Vue 实例。一些用户可能会问 Vue.js 是否有“控制器”的概念？答案是，没有。组件的自定义逻辑可以分布在这些钩子中。
// this 指向 vm 实例
console.log(this.message + '实例被创建');
}
});
</script>
</body>
</html>
八、注册全局组件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue-demos</title>
<script src="../vue.js"></script>
</head>
<body>
<!--
全局组件
在Vue里，一个组件实质上是一个拥有预定义选项的一个Vue实例。
要注册一个全局组件，你可以使用 Vue.component(tagName, options)
-->
<div id="app">
<!-- 引用组件 -->
<my-component></my-component>
</div>
<script>
// 注册组件。要确保在初始化根实例之前注册了组件
Vue.component('my-component', {
template: '<div>A custom component!</div>'
});
// 创建根实例
var app = new Vue({
el: '#app'
});
</script>
</body>
</html>
九、注册局部组件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue-demos</title>
<script src="../vue.js"></script>
</head>
<body>
<!--
局部注册组件
不必在全局注册每个组件。通过使用组件实例选项注册，可以使组件仅在另一个实例/组件的作用域中可用
-->
<div id="app">
<!-- 引用组件 -->
<my-component></my-component>
</div>
<script>
// 注册局部组件
var Child = {
template: '<div>A child component!</div>'
}
// 创建根实例.并调用局部组件
var app = new Vue({
el: '#app',
components: {
'my-component': Child
}
});
</script>
</body>
</html>
十、props传递数据
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue-demos</title>
<script src="../vue.js"></script>
</head>
<body>
<!--
父组件通过 props 向下传递数据给子组件，子组件通过 events 给父组件发送消息
prop 是单向绑定的：当父组件的属性变化时，将传导给子组件。
父组件使用 props 把数据传给子组件，子组件需要显式地用 props 选项 声明 “prop”：
-->
<div id="app">
<!-- 引用组件 -->
<child message="hello!"></child>
</div>
<script>
Vue.component('child', {
// 声明父组件的属性，props。然后在本子组件中就可以使用这个属性。
props: ['message'],
template: '<span>{{ message }}</span>'
}) var app = new Vue({
el: '#app'
});
</script>
</body>
</html>
十一、自定义事件events
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue-demos</title>
<script src="../vue.js"></script>
</head>
<body>
<!--
父组件使用 props 把数据传给子组件,但如果子组件要把数据传递回去，那就是自定义事件！
自定义事件也是使用v-on绑定。
使用 $on(eventName) 监听事件
使用 $emit(eventName) 触发事件 本例在app实例里定义了事件changeMsg().在子组件中去触发这个事件。从而实现子组件的数据传递到父组件
--> <div id="app">
<p>Message: {{message}}</p>
<child></child>
</div> <template id="temp">
<div>
<input v-model="msg" placeholder="please input your message!" />
<button @click="test(msg)">change message</button>
</div>
</template> <script>
Vue.component('child', {
//指定模板为id为"temp"标签
template: "#temp",
//定义模板中初始化的值,data应该是一个函数
data: function() {
return {
msg: "hello",
}
},
methods: {
//当点击按钮时会触发的事件(这个事件中会调用自定义的事件)
test: function(msg){
console.log('be click' + msg);
app.$emit('changeMsg', msg);
}
} }) var app = new Vue({
el: '#app',
//初始化messages数组
data: {
message: 'hello',
}
}); //自定义事件
app.$on('changeMsg', function (msg) {
console.log('我是自定义事件')
app.message = msg;
})
</script>
</body>
</html>
Vue入门2的更多相关文章
- wepack+sass+vue 入门教程（三）
十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...
- wepack+sass+vue 入门教程（二）
六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...
- wepack+sass+vue 入门教程（一）
一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...
- vue入门学习（基础篇）
vue入门学习总结: vue的一个组件包括三部分:template.style.script. vue的数据在data中定义使用. 数据渲染指令:v-text.v-html.{{}}. 隐藏未编译的标 ...
- VUE 入门笔记
前端的MVVM概念今年来也算是如火如荼,了解完 MVVM的概念,也该找个去尝试下 首先我先试了下 国内小而美的 VUE 试着照着文档敲出入门文件,内容都在注释里 <!doctype html&g ...
- Vue 入门指南 JS
Vue 入门指南 章节导航 英文:http://vuejs.org/guide/index.html 介绍 vue.js 是用来构建web应用接口的一个库 技术上,Vue.js 重点集中在MVVM模式 ...
- Vue学习记录第一篇——Vue入门基础
前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...
- parcel+vue入门
一.parcel简单使用 npm install -D parcel-bundler npm init -y (-y表示yes,跳过项目初始化提问阶段,直接生成package.json 文件.) Pa ...
- Vue入门基础
前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...
- 学习Vue 入门到实战——学习笔记
闲聊: 自从进了现在的公司,小颖就再没怎么接触vue了,最近不太忙,所以想再学习下vue,就看了看vue相关视频,顺便做个笔记嘻嘻. 视频地址:Vue 入门到实战1.Vue 入门到实战2 学习内容: ...
随机推荐
- myeclipse或eclipse无法从wtpServer添加tomcatServer
在eclipse想把之前的Tomcat 6删掉,重新配置一个,不料没有下一步 Cannot create a server using the selected type 这句话出现在窗口上面,应该不 ...
- RestfulAPI超简单入门
简单入门 REST -- REpresentational State Transfer,英语的直译就是"表现层状态转移" 是目前最流行的 API 设计规范,用于 Web 数据接口 ...
- CSS十大选择器
CSS十大选择器: 1.id选择器 # 2.class选择器 句号 . 3.标签选择器 标签名称 4.相邻选择器 加号 + 5.后代选择器 空格 6.子元素选择器 大于号 > 7.多元素 ...
- LOJ#6085. 「美团 CodeM 资格赛」优惠券(set)
题意 题目链接 Sol 考虑不合法的情况只有两种: 进去了 再次进去 没进去 但是出来了 显然可以用未知记录抵消掉 直接开个set维护一下所有未知记录的位置 最优策略一定是最后一次操作位置的后继 同时 ...
- js-ES6学习笔记-编程风格（2）
1.那些需要使用函数表达式的场合,尽量用箭头函数代替.因为这样更简洁,而且绑定了this. 2.所有配置项都应该集中在一个对象,放在最后一个参数,布尔值不可以直接作为参数. 3.不要在函数体内使用ar ...
- 除虫记之C#调用C函数出现的诡异错误
作者:朱金灿 来源:http://blog.csdn.net/clever101 同事反映在在项目中使用C#程序调用我们部门编写的C++模块出现一个诡异错误:在调用A算法失败后,其它算法均不能调 ...
- Expo大作战(十八)--expo如何发布成独立应用程序，打包成apk或者ipa，发布到对应应用商店
简要:本系列文章讲会对expo进行全面的介绍,本人从2017年6月份接触expo以来,对expo的研究断断续续,一路走来将近10个月,废话不多说,接下来你看到内容,讲全部来与官网 我猜去全部机翻+个人 ...
- 如何用 Python 实现 Web 抓取？
[编者按]本文作者为 Blog Bowl 联合创始人 Shaumik Daityari,主要介绍 Web 抓取技术的基本实现原理和方法.文章系国内 ITOM 管理平台 OneAPM 编译呈现,以下为正 ...
- 美图DPOS以太坊教程（Docker版）
一.前言 最近,需要接触区块链项目的主链开发,在EOS.BTC.ethereum.超级账本这几种区块链技术当中,相互对比后,最终还是以go-ethereum为解决方案. 以ethereum为基准去找解 ...
- ubuntu下给raspy pi2 编译qt5库
交叉编译时,通常要准备mkspec, 参考: http://wiki.qt.io/Building_Qt_for_Embedded_Linux mkspec包含两个文件: qmake.conf- Th ...