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. numpy用法小结

    前言 个人感觉网上对numpy的总结感觉不够详尽细致,在这里我对numpy做个相对细致的小结吧,在数据分析与人工智能方面会有所涉及到的东西在这里都说说吧,也是对自己学习的一种小结! numpy用法的介 ...

  2. 快速失败机制--fail-fast

    fail-fast 机制是Java集合(Collection)中的一种错误机制.当多个线程对同一个集合的内容进行操作时,就可能会产生fail-fast(快速失败)事件.例如:当某一个线程A通过iter ...

  3. MYSQL数据库学习十一 多表数据记录查询

    11.1 关系数据操作 并(UNION):把具有相同字段数目和字段类型的表合并到一起. 笛卡尔积(CARTESIAN PRODUCT):没有连接条件表关系的返回结果.字段数=table1字段数+tab ...

  4. [HNOI2002]营业额统计_Treap

    [HNOI2002]营业额统计 题目大意:给你一串n数序列,对于每一个刚输入的数a,找到一个前面的数k,使得|a-k|最小. 注释:$n<=32767,ai<=10^6$. 想法:刚学Tr ...

  5. opencv配置

    1.安装opecv库 从官网http://opencv.org/下载OpenCV windows版 运行之后 2.配置环境变量 64位系统,可以将32位和64位两个都添加上,免得以后编译不同程序再来配 ...

  6. 248&258--高级软件工程第三次作业

    0 小组成员 马帅 / 2017202110248 齐爽爽 / 2017282110258 1 项目 GitHub 地址 GitHub:https://github.com/whumashuai/QT ...

  7. Beta版本敏捷冲刺每日报告——Day2

    1.情况简述 Beta阶段第二次Scrum Meeting 敏捷开发起止时间 2017.11.3 08:00 -- 2017.11.3 22:00 讨论时间地点 2017.11.3晚9:00,软工所实 ...

  8. 《招一个靠谱的移动开发》iOS面试题及详解(下篇)

    iOS面试知识点 现在进入本篇的正题.本篇的面试题是我认为比较好的iOS开发基础知识点,希望大家看过这后在理解的基础上掌握而不是死记硬背.死记硬背很快也会忘记的. 1 iOS基础 1.1 父类实现深拷 ...

  9. Struts2之Struts2的下载与安装

    Struts2的下载 登陆struts的官网 下载Full Distribution这个选项的struts2的包. 这是Struts2的完整版,里面包括Struts2的实例应用,空实例应用,核心库,源 ...

  10. BEM 中文翻译

    BEM 原文请看 getBEM Introduction(介绍) Block 独立实体,独立的意义 Examples:header, container, menu, checkbox, input ...