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. linux学习之路－－（三）文件系统

    一.文件系统 rootfs:根文件系统 FHS:linux /boot:系统启动相关的文件,如内核.initrd,grub(bootloader) /dev:设备文件:不存储内容,就是个访问入口 块设 ...

  2. 001-List,数组,Set,Map属性的映射

    hibernate.cfg.xml: <!DOCTYPE hibernate-configuration PUBLIC "-//Hibernate/Hibernate Configur ...

  3. flex布局之兼容

    Android 2.3 开始就支持旧版本 display:-webkit-box; 4.4 开始支持标准版本 display: flex; IOS  6.1 开始支持旧版本 display:-webk ...

  4. 【Python】 用户图形界面GUI wxpython IV 菜单&对话框

    更多组件 ■ 菜单栏 Menu 菜单是很多GUI必不可少的一部分.要建立菜单,必须先创建菜单栏: menuBar = MenuBar() menu = Menu() item1 = menu.Appe ...

  5. 关于bootstrap的form表单的输入框间距样式

    <!-- 模态弹出窗内容 --> <div class="modal" tabindex="-1" role="dialog&quo ...

  6. Matlab绘图基础——用print函数保存图片(Print figure or save to file)

    print(figure_handle,'formats','-rnumber','filename')  %将图形保存为png格式,分辨率为number的(默认为72),最好指定的分辨率大一点,否则 ...

  7. Mysql加密解密随机函数

    MD5(str) md5加密 SELECT MD5('hello') 5d41402abc4b2a76b9719d911017c592 sha(str) sha加密 SELECT SHA('hello ...

  8. java1.8版本的HashMap源码剖析

    一.摘要 以下分析内容均是基于JDK1.8产生的,同时也和JDK1.7版本的hashmap做了一些比较.在1.7版本中,HashMap的实现是基于数组+链表的形式,而在1.8版本中则引入了红黑树,但其 ...

  9. IT & ME

    第一部分:结缘计算机 填报志愿的那天晚上,老爸老妈和我一起在房间里讨论专业选择的事情.因为我性格比较内敛,家人建议我去学医.而我又对学医一点也不感冒,再加上自己高中时期一直喜欢玩游戏,于是最后就填报了 ...

  10. Alpha冲刺Day1

    项目Alpha冲刺Day1 一.站立式会议 照片: 今日安排: 今天是项目开始的第一天,我们小组一起开会讨论了一下具体每天代码进度的落实情况,做了一下大体的规划.另外准备搭建一下环境和项目部署. 二. ...