Vue框架

环境：

windows

python3.6.2

Vue的cdn：

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

本地Vue.js下载： https://cn.vuejs.org/v2/guide/installation.html

Vue官网： https://cn.vuejs.org/index.html

Vue的使用

　　通过new Vue 来实例化vue对象，其操作都通过这个对象来实现，el绑定到标签，切记，vue只认识id,不支持class,声明变量都在data里面

vue通过 {{temp}} 来渲染变量

{{count+100}}　　# 求和

v-text　　# 为标签插入text文本

v-html　　# 为标签插入html

v-show 　 # 根据布尔值判断，显示与隐藏，

v-if　　　# if判断语句，根据真假值来显示对应的内容

v-else　　# 与v-if连用

v-for 　　# for循环，如果对象是列表的话，可以显示其索引，字典默认显示value值
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="x-ua-compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Vue</title>

</head>

<body>

<div id="app">

    <p id="p1">{{temp}}</p>

    <p id="p3">{{temp2}}</p>

    <p id="p2">{{count+1000}}</p>

    <div v-if="ok">孙杰辉</div>

    <div v-else>陈人建</div>

    <ul>

        <li v-for="item in obj2">

            {{item}}

        </li>

    </ul>

    <ul>

        <li v-for="item in obj">

            {{item.name}}

            {{item.age}}

            {{item.sex}}

        </li>

    </ul>

    <input type="button" v-on:click="showme()" value="v-on点击事件">

    <input type="button" @click="showme" value="v-on的另一种写法 @点击">

    <a v-bind:href="url">v-bind</a>

    <a :href="url">v-bind的另一种写法</a>

</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<script>

    var vm = new Vue({

        el: "#app",

        data: {

            temp:"100",

            ok: true,

            count:5,

            obj:[{name:"孙杰辉", age:54,sex:"女"},{name:"陈人建", age:56,sex:"男"}],

            obj2:[1,2,3,4,5,6,7,8],

            url:"http://www.baidu.com",

            temp2:'temp2',

        },

        methods:{

            showme:function () {

                alert(this.temp);

            }

        }

    });

    setTimeout(function () {

        vm.temp2= '时间设定'

    },5000)

</script>

</body>

</html>

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="https://cdn.jsdelivr.net/npm/vue"></script>

</head>

<body>

    <div id="i1">

        {{message}}

    </div>

    <script>

        new Vue({         // 通过new Vue定义一个方法

            el:'#i1',    // el 是通过jquery的方式获取标签，注意（只能获取到id的 class的不能使用）

            data:{       //  通过使用data关键字对应的字典类型，然后在字典中使用之前定义的message变量通过映射的方式给这个变量进行赋值

                message:'hello world!'

                //  现在的message就是被hello world给覆盖掉了

            }

        })

    </script>

</body>

</html>

　　

Vue框架的更多相关文章

  1. Vue框架Element的事件传递broadcast和dispatch方法分析

    前言 最近在学习饿了么的Vue前端框架Element,发现其源码中大量使用了$broadcast和$dispatch方法,而Element使用的是Vue2.0版本,众所周知在Vue 1.0升级到2.0 ...

  2. 使用vue框架运行npm run dev 时报错解决

    使用使用vue框架运行npm run dev 时报错 如下: 原因: localhost:8080 有可能其他软件占用了,导致其他问题的出现 我们可以动态修改地址 解决: 进入项目文件的config文 ...

  3. Vue框架下的node.js安装教程

    Vue框架下的node.js安装教程 python服务器.php  ->aphche.java ->tomcat.   iis -->它是一个可以运行JAVASCRIPTR 的运行环 ...

  4. Vue框架axios请求（类似于ajax请求）

    Vue框架axios get请求(类似于ajax请求) 首先介绍下,这个axios请求最明显的地方,通过这个请求进行提交的时候页面不会刷新 <!DOCTYPE html> <html ...

  5. Vue框架之双向绑定事件

    Vue框架之双向绑定事件 首先介绍下Vue框架的语法 vue通过 {{temp}} 来渲染变量 {{count+100}} # 求和 v-text # 为标签插入text文本 v-html # 为标签 ...

  6. vue框架入门和ES6介绍

    vue框架入门和ES6介绍 vue-mvvm模式,vue是一种轻量级的前端框架,主要为模板渲染,数据同步,组件化,模块化,路由等. https://cn.vuejs.org/ 源码:https://g ...

  7. 基于VUE框架 与 其他框架间的基本对比

    基于VUE框架的基本描述 与 其他框架间的基本对比 2018-11-03  11:01:14 A B React React 和 Vue 有许多相似之处,它们都有: 使用 Virtual DOM 提供 ...

  8. VUE框架的初识

    VUE框架的初识 初步了解Vue.js框架(渐进式前端框架) Vue.js是一种轻量级的前端MVVM框架.同时吸收了React(组件化)和Angular(灵活指令页面操作)的优点.是一套构建用户界面的 ...

  9. vue框架中的日期组件转换为yyy-mm-dd格式

    最近在用vue框架写一个app,这个是用到的日期格式转换,把下面的标准格式转换为字符串连接格式

随机推荐

  1. PDF加密无法做笔记

    尝试打印PDF,若无法打印,可以利用PDFescape(http://www.pdfescape.com/) PDFescape是一个可以在线修改.做笔记的网站,但是在线使用有上传PDF大小限制(小于 ...

  2. angularjs常用事件

    1. 视图模板加载完毕 $scope.$on('$viewContentLoaded', function() { alert('view template loaded'); });

  3. Object.defineProperty实现数据绑定

    1.Object.defineProperty方法 Object.defineProperty(obj, prop, descriptor); (1)参数:  obj:目标对象 prop:需要定义的属 ...

  4. Jenkins + Docker 持续集成

    Jenkins介绍 Jenkins是一个开源软件项目,是基于Java开发的一种持续集成工具,用于监控持续重复的工作,旨在提供一个开放易用的软件平台,使软件的持续集成变成可能. 安装部署Jenkins ...

  5. lvs(dr)+keepalived

    系统:centos6.5mini 环境: 机器名 Ip地址 角色 Vip-web: 192.168.20.50 Vip-mysql: 192.168.20.60 lvs01 192.168.20.10 ...

  6. [poj2585]Window Pains_拓扑排序

    Window Pains poj-2585 题目大意:给出一个4*4的方格表,由9种数字组成.其中,每一种数字只会出现在特定的位置,后出现的数字会覆盖之前在当前方格表内出现的.询问当前给出的方格表是否 ...

  7. SQLite学习手册(数据表和视图)

    如何列出SQLite数据库中的所有表 SQLite数据库中的信息存在于一个内置表sqlite_master中,在查询器中可以用 select * from sqlite_master 来查看,如果只要 ...

  8. 关于Netty的入门使用

    Netty介绍: Netty是一个提供异步事件驱动的网络应用框架,用以快速开发高性能.高可靠性的网络服务器和客户端程序. 换句话说,Netty是一个NIO框架,使用它可以简单快速地开发网络应用程序,比 ...

  9. 使用idea新建jsp

    使用idea解决新建jsp文件而找不到jsp文件模版的新建选项,这样每次创建一个新的jsp文件岂不是很耗时间? 解决办法: 就是要让idea知道你需要在这个目录下创建jsp文件 左上角,file中点击 ...

  10. Leetcode 28——Implement strStr()

    Implement strStr(). Return the index of the first occurrence of needle in haystack, or -1 if needle ...