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. jsp页面集成xhEditor文本编辑器

    经常写博客的都应该接触文本编辑器,现在大多数都是使用Markdown,Markdown是一种可以使用普通文本编辑器编写的标记语言,在文章中通过简单的语法标记就可以实现文字的不同格式,对于Markdow ...

  3. Object的方法

    1.Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象.它将返回目标对象. ES2015引入的 ,且可用polyfilled.要支持旧浏览器的话,可用使用jQ ...

  4. [poj3107]Godfather_树形dp_树的重心

    Godfather poj-3107 题目大意:求树的重心裸题. 注释:n<=50000. 想法:我们尝试用树形dp求树的重心,关于树的重心的定义在题目中给的很明确.关于这道题,我们邻接矩阵存不 ...

  5. 使用Java编译思想

    1.Java常见的注释有哪些,语法是怎样的? 1)单行注释用//表示,编译器看到//会忽略该行//后的所文本 2)多行注释/* */表示,编译器看到/*时会搜索接下来的*/,忽略掉/* */之间的文本 ...

  6. 04_Python的数据类型1数值和字符串_Python编程之路

    上一节我们通过一个helloworld程序学习python的一些简单操作,还有输入与输出 这节我们来讲Python的数据类型与变量的操作 Python的交互器 在讲这个之前,我要先讲一下python的 ...

  7. 外部 Storage Provider - 每天5分钟玩转 Docker 容器技术（149）

    如果 Kubernetes 部署在诸如 AWS.GCE.Azure 等公有云上,可以直接使用云硬盘作为 Volume,下面是 AWS Elastic Block Store 的例子: 要在 Pod 中 ...

  8. 巨人大哥谈Java中的Synchronized关键字用法

    巨人大哥谈Java中的Synchronized关键字用法 认识synchronized 对于写多线程程序的人来说,经常碰到的就是并发问题,对于容易出现并发问题的地方价格synchronized基本上就 ...

  9. 2017级C语言教学总结

    一个学期下来,对于这门课教学还是感受挺多,多个教学平台辅助,确实和我前10年的教学方式区别很多,也辛苦很多. 一.课堂教学方面 1.课堂派预习作业 主要借助课堂派平台,每次课前发布预习作业.而预习作业 ...

  10. 每日冲刺报告——Day5（Java-Team）

    第五天报告(11.6  周一) 团队:Java-Team 成员: 章辉宇(284) 吴政楠(286) 陈阳(PM:288) 韩华颂(142) 胡志权(143) github地址:https://git ...