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. 部署Flask项目到腾讯云服务器CentOS7

    部署Flask项目到腾讯云服务器CentOS7 安装git yum install git 安装依赖包 支持SSL传输协议 解压功能 C语言解析XML文档的 安装gdbm数据库 实现自动补全功能 sq ...

  2. 剑指Offer-平衡二叉树

    package Tree; /** * 平衡二叉树 * 输入一棵二叉树,判断该二叉树是否是平衡二叉树. * 平衡二叉树(Balanced Binary Tree)又被称为AVL树(有别于AVL算法), ...

  3. Maven-06: 插件的内置绑定

    Maven的生命周期与插件相互绑定,用以完成实际的构建任务.具体而言,是生命周期的阶段与插件的目标相互绑定,以完成某个具体的构建任务.例如项目编译这一任务,它对应default生命周期的compile ...

  4. oracle相同SID对外提供多个service_names

    为数据库设置多个服务名(通过SCOPE=both设置,同时修改参数文件) SQL> show parameter service_names; NAME TYPE VALUE --------- ...

  5. CAS 之 Https And Database Authentication（三）

    CAS 之 Https And Database Authentication(三) 标签(空格分隔): CAS sso-examples-guides源码 Intro(介绍) 由上节可知Apereo ...

  6. java排序算法（十）：桶式排序

    java排序算法(十):桶式排序 桶式排序不再是一种基于比较的排序方法,它是一种比较巧妙的排序方式,但这种排序方式需要待排序的序列满足以下两个特征: 待排序列所有的值处于一个可枚举的范围之类: 待排序 ...

  7. 1077. Kuchiguse (20)

    The Japanese language is notorious for its sentence ending particles. Personal preference of such pa ...

  8. lua continue实现

    --第一种 , do while true do == then break end -- 这里有一大堆代码 -- -- break end end --第二种 i = ) do if () then ...

  9. 03-第一个脚本程序以及输入输出_Python编程之路

    上节课已经教大家安装了Python的解释器,那么这节课我们就可以正式来写代码了 说明:在下面的代码演示中,我将大部分使用python交互器演示代码的输入输出,注意">>>& ...

  10. 听翁恺老师mooc笔记（9）--枚举

    枚举类型的定义 用符号而不是具体的数字来表示程序中的数字,这么表示的好处是可读性,当别人看你的程序,看到的是单词,很容易理解这些数字背后的含义,那么用什么符号来表示名字哪?需要const int常量的 ...