vue学习01

 

1. 创建一个Vue实例
官网-学习-教程-安装-（开发/生产版本）-与jQuery的引用相似

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="vue.js"></script>
    </head>
    <body>
        <div id="root">
            <!-- v-on处理click事件 -->
            <!-- v-on:可以简写为@ -->
            <!-- v-bind 绑定数据，将title与data中title绑定 -->
            <!-- v-bind:可以简写为为 ： -->
            <div :title="title" @click="handClick">{{msg}}</div>
            <!-- v-model:用来进行双向数据绑定 -->
            <input v-model:value="content"/>
            <div>{{content}}</div>
            姓：<input v-model:value="firstName"/>
            名：<input v-model:value="lastName"/>
            <div>{{fullName}}</div>
            <div>{{count}}</div>
            <div v-if="show">你可以看到我吗</div>
            <button @click="handleShow">试试看喽</button>
            <!-- 循环展示 -->
            <ul>
                <!-- <li v-for="item of list">{{item}}</li> -->
                <!-- 加入key值，增强渲染效果，index表示的是下标，所以每一个index都是不一样的 -->
                <li v-for="(item,index) of list":key="index">{{item}}</li>
            </ul>
        </div>
        <script>
            /* 创建Vue实例  接管ID为root的元素*/
            new Vue({
                el:"#root",
                data:{
                    msg:"hello world",
                    title:"this is hello world",
                    content:"双向数据绑定",
                    firstName:'',
                    lastName:'',
                    count:0,
                    show:true,
                    list:[1,2,3,4]
                },
                // 计算属性：如果之前的计算内容没有改变，那么fullName就会显示上一次缓存的值，直到firstName或者lastName改变
                computed:{
                    fullName: function(){
                       return this.firstName+" "+this.lastName;
                    }
                },
                methods:{
                    handClick:function(){
                        // alert('123');
                        this.msg="666";
                    },
                    handleShow:function(){
                        this.show=!this.show;
                    }
                },
                // 侦听器
                watch: {
                    // firstName:function(){
                    //     this.count++;
                    // },
                    // lastName:function(){
                    //     this.count++;
                    // }
                    fullName:function(){
                        this.count++;
                    }
                }

            });
        </script>
    </body>
</html>

2. 挂载点、模板、实例之间的关系
　挂载点：div标签 对应el属性
   模板：挂载点之内的内容，也可以写在实例的template属性里面
3. {{xxx}} 叫做插值表达式
   属性的绑定
   {{number}} 与 v-text="number"效果是一样的
   v-html 会进行转义，可以输出HTML格式的内容。
   v-on:click="hanleClick"
4. 只要是在模板里面使用了模板指令（v-on、@、v-bind），等号 后面就不再是字符串了，而是一个js的表达式
5. 双向数据绑定：
    既可以通过数据来修改模板中的内容，又可以通过修改模板中 的内容来修改数据中的内容。
    v-model
6. Vue中的计算属性和侦听器
7. v-if、v-show、v-for
    如果v-if为false的话，会将v-if所在的标签从DOM树里面删除
    如果v-show为false的，会将该标签的显示属性设置为display: none;

vue学习01的更多相关文章

  1. Vue学习-01

    1.vue 学习 v-bind:title 数据绑定 v-if 判断显示或者隐藏 <div id="app-3"> <p v-if="seen" ...

  2. vue学习09 图片切换

    目录 vue学习09 图片切换 定义图片数组:imgList:[],列表数据使用数组保存 添加图片索引:index 绑定src属性:使用v-bind,v-bind指令可以设置元素属性,比如src 图片 ...

  3. Python学习--01入门

    Python学习--01入门 Python是一种解释型.面向对象.动态数据类型的高级程序设计语言.和PHP一样,它是后端开发语言. 如果有C语言.PHP语言.JAVA语言等其中一种语言的基础,学习Py ...

  4. Java虚拟机JVM学习01 流程概述

    Java虚拟机JVM学习01 流程概述 Java虚拟机与程序的生命周期 一个运行时的Java虚拟机(JVM)负责运行一个Java程序. 当启动一个Java程序时,一个虚拟机实例诞生:当程序关闭退出,这 ...

  5. Android Testing学习01 介绍 测试测什么 测试的类型

    Android Testing学习01 介绍 测试测什么 测试的类型 Android 测试 测什么 1.Activity的生命周期事件 应该测试Activity的生命周期事件处理. 如果你的Activ ...

  6. Vue学习笔记-2

    前言 本文非vue教程,仅为学习vue过程中的个人理解与笔记,有说的不正确的地方欢迎指正讨论 1.computed计算属性函数中不能使用vm变量 在计算属性的函数中,不能使用Vue构造函数返回的vm变 ...

  7. Vue学习笔记-1

    前言 本文不是Vue.js的教程,只是一边看官网Vue的教程文档一边记录并总结学习过程中遇到的一些问题和思考的笔记. 1.vue和avalon一样,都不支持VM初始时不存在的属性 而在Angular里 ...

  8. Java学习01

    Java学习01 第一章 1.JRE与JDK JDK(JAVA Develop Kit,JAVA开发工具包)提供了Java的开发环境和运行环境,主要用于开发JAVA程序,面向Java程序的开发者; J ...

  9. ThinkPhp学习01

    原文:ThinkPhp学习01 一.ThinkPHP的介绍           MVC  M - Model 模型                工作:负责数据的操作  V - View  视图(模板 ...

随机推荐

  1. 织梦(Dedecms) V5.6 plus/carbuyaction.php 本地文件包含漏洞

    漏洞版本: DedeCmsV5.6 漏洞描述: DedeCMS内容管理系统软件采用XML名字空间风格核心模板:模板全部使用文件形式保存,对用户设计模板.网站升级转移均提供很大的便利,健壮的模板标签为站 ...

  2. Ubuntu下设置服务自启动

    Ubuntu下设置服务自启动 一般/etc下可能还有/etc/rc.local,/etc/rc.sysinit文件,一般/etc/rc.local默认并不做什么实事,可能是系统留下的一个接口,供用户添 ...

  3. Bridge 桥接模式 MD

    桥接模式 简介 将抽象部分与实现部分分离,使它们都可以独立的变化. 业务抽象角色引用业务实现角色,或者说业务抽象角色的部分实现是由业务实现角色完成的 Bridge模式基于类的最小设计原则,通过使用封装 ...

  4. 使用Spring Security和OAuth2实现RESTful服务安全认证

    这篇教程是展示如何设置一个OAuth2服务来保护REST资源. 源代码下载github. (https://github.com/iainporter/oauth2-provider)你能下载这个源码 ...

  5. 【K8S】K8S-网络模型、POD/RC/SVC YAML 语法官方文档

    K8S-网络模型.POD/RC/SVC YAML 语法官方文档 Kubernetes - Production-Grade Container Orchestration kubernetes/kub ...

  6. ObservableCollection

    1)可以使绑定控件与基础数据源保持同步2)还可以在您添加.删除.移动.刷新或替换集合中的项目时引发 CollectionChanged 事件3)还可以在您的窗口以外的代码修改基础数据时做出反应4)相互 ...

  7. 红米NOTE应用闪退（包括系统设置等各种界面）问题解决经历

    关机状态下同时按减音量按钮和开机按钮,进入一个菜单,选择recovery(减音量键是移动,加音量键是确定),当出现一个倒地的机器人的时候,稍待片刻按开机键会出现双清以及刷机菜单.wipe data/f ...

  8. HTTP请求格式和HTTP响应格式

    主要内容: 1.HTTP请求格式 2.HTTP响应格式 一.HTTP请求格式 当浏览器向Web服务器发出请求时,它向服务器传递了一个数据块,也就是请求信息,HTTP请求信息由3部分组成:l   请求方 ...

  9. fatal: incorrect checksum in control file

    在网上搜到 7. 修改pg_controlfile的checksum源码, 不check. vi src/backend/access/transam/xlog.c 注释checksum部分     ...

  10. 吐槽一下Page Restore

    以前觉得Page Restore确实挺好用的,而且确实用Page Restore快速解决过一些问题.但是仔细想想很多时候Page Restore可能根本用不上. 因为SQL Server在备份的时候是 ...