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 学习内容: ...

随机推荐

[MongoDB] mongodb与php
windows上安装mongodb的php扩展下载地址https://s3.amazonaws.com/drivers.mongodb.org/php/index.html 找到对应的php版本的d ...
【RabbitMQ】1、RabbitMQ的几种典型使用场景
RabbitMQ主页:https://www.rabbitmq.com/ AMQP AMQP协议是一个高级抽象层消息通信协议,RabbitMQ是AMQP协议的实现.它主要包括以下组件: 1.Serve ...
__repr__与__str__
首先我们来举个例子,定义一个长方行类Cuboid,长为x,宽为y,高为z class Cuboid: def __init__(self, x = 3, y = 1, z = 2): self.x = ...
JavaScript：作用域与作用域链
1.什么是作用域(scope)? 简单来讲,作用域(scope)就是变量访问规则的有效范围. 作用域外,无法引用作用域内的变量: 离开作用域后,作用域的变量的内存空间会被清除,比如执行完函数或者关闭浏 ...
Django使用多个数据库
一.定义数据库使用Django的多个数据库的第一步是告诉Django将使用的数据库服务器. 这是使用DATABASES设置完成的. 此设置将数据库别名映射到该特定连接的设置字典,该数据库别名是一种在 ...
CentOS7下将django工程部署到Apache2.4上
因为需要写一个网站,考虑到也没写过其他的语言,就直接采用了python,说起python的框架,就是大名鼎鼎的Django啦. 工程所采用的版本是python 2.7,django 是1.8,wind ...
用JavaScript写弹窗
每个弹窗的标识var x =0; var idzt = new Array(); var Window = function(config){ ID不重复 idzt[x] = "zhuti& ...
JMeter4.0的界面汉化
1.安装好之后 2.界面汉化 options->choose language->chinese(simplified) 3.汉化完成
Android长按事件和点击事件冲突问题
长按点击的时候默认会触发点击事件,android系统是优先点击的,并且没有返回值:而长按事件是有返回值的,如果返回false,两个事件都会有响应,如果返回true则只响应长按事件.
[Android] 仿照 Last App Switcher 写的小程序
在Android众多工具类app中,Last App Switcher绝对算是一个让人用过就不会卸载的工具.LAS这个应用,它的功能很简单,就是通过一个浮动按钮实现在两个应用之间一键切换,但是非常 ...

Vue入门2

Vue入门2的更多相关文章

随机推荐

热门专题