1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <script type="text/javascript" src="https://lib.baomitu.com/vue/2.5.21/vue.js"></script>
  6.     <title>Document</title>
  7. </head>
  8. <body>
  9.     <div id="app">
  10.         <!--差值表达式-->
  11.         {{ name1 }}
  12.         <!--v-text 读取文本不能读取html标签-->
  13.         <h1 v-text="name2"></h1>
  14.         <!--v-html 能读取文本和html标签-->
  15.         <div v-html="name3"></div>
  16.         <!--v-model 双向绑定-->
  17.         <input type="text" v-model="name4" />
  18.         <br>
  19.         名字：{{ name4 }}
  20.         <br>
  21.         <!--v-bind 绑定属性-->
  22.         <a v-bind:href="name5">百度一下</a>
  23.         <hr>
  24.         <!--v-if 添加或者移除dom树中-->
  25.         <h1 v-if="name6">你好</h1>
  26.         <!--v-show 修改元素的display的值 进行显示隐藏-->
  27.         <h1 v-show="name7">你好</h1>
  28.         <!--v-for-->
  29.         <ul>
  30.             <li v-for="vo in list">{{ vo.no}},{{vo.name}}</li>
  31.         </ul>
  32.         <!--v-on 绑定事件-->
  33.         <ul>
  34.             <li v-on:click="myclick">单击</li>
  35.             <li @click="myclick">单击的快捷绑定</li>
  36.         </ul>
  37.     </div>
  38.  
  39.     <script type="text/javascript">
  40.         new Vue({
  41.             // 管理边界
  42.             el:'#app',
  43.             // 数据
  44.             data:{
  45.                 name1:'hello',
  46.                 name2:'小明',
  47.                 name3:'<h1>你好世界</h1>',
  48.                 name4:'',
  49.                 name5:'http://www.baidu.com',
  50.                 name6:true,
  51.                 name7:true,
  52.                 list:[
  53.                     {no:,name:'aaa'},
  54.                     {no:,name:'bbb'},
  55.                     {no:,name:'ccc'}
  56.                 ]
  57.             },
  58.             // 方法
  59.             methods:{
  60.                 myclick : function(){
  61.                     console.log("我被点击");
  62.                 }
  63.             }
  64.         })
  65.     </script>
  66. </body>
  67. </html>

补充 v-else-if

  1. <div id="box">
  2.     <div style="width: 100px;height: 100px;background: black;" v-if="show"></div>
  3.     <div style="width: 100px;height: 100px;background: aqua;" v-else-if=""></div>
  4.     <div style="width: 300px;height: 300px;background: blue" v-else=""></div>
  5. </div>
  6.  
  7. <script>
  8.     new Vue({
  9.         el: "#box",
  10.         data(){
  11.             return {
  12.                 show: true
  13.             }
  14.         }
  15.     })
  16. </script>

补充return问题

  1. 在简单的vue实例中看到的Vue实例中data属性是如下方式展示的：
  2.  
  3. let app= newVue({
  4.  
  5.     el:"#app",
  6.     data:{
  7.         msg:''
  8.     },
  9.     methods:{
  10.  
  11.     }
  12. })
  13. 在使用组件化的项目中使用的是如下形式：
  14. export default{
  15.     data(){
  16.         return {
  17.             showLogin:true,
  18.             // def_act: '/A_VUE',
  19.             msg: 'hello vue',
  20.             user:'',
  21.             homeContent: false,
  22.         }
  23.     },
  24.     methods:{
  25.  
  26.     }
  27. }
  28. 为何在大型项目中data需要使用return返回数据呢？
  29. 不使用return包裹的数据会在项目的全局可见，会造成变量污染
  30. 使用return包裹后数据中变量只在当前组件中生效，不会影响其他组件。

大概9个 {{}} v-text v-html v-model v-bind v-if v-show v-for v-on

指令名 解释
v-text 读取文本内容 不包括html标签
v-html 读取文本内容 包括html标签
v-model 数据双向绑定
v-bind 绑定标签属性
v-if 判断显示隐藏 这个操作dom 安全性好
v-show 判断显示隐藏 操作的是display 不删除元素的dom节点
v-for 循环遍历数据
v-on 绑定自定义方法
{{}} 差值表达式 把data中的数据 显示到页面

VUE常用指令总结！的更多相关文章

  1. vue学习（二）Vue常用指令

    2 Vue常用指令 1. vue的使用要从创建Vue对象开始 var vm = new Vue(); 2. 创建vue对象的时候,需要传递参数,是json对象,json对象对象必须至少有两个属性成员 ...

  2. 【Vue常用指令】

    目录 v-html v-text v-for v-if v-show v-bind v-on v-model 指令修饰符 计算与侦听属性 自定义属性 获取DOM元素 "@ *** Vue.j ...

  3. 重学VUE——vue 常用指令有哪些？

    一.什么是指令? 在 vue 中,指令以 v- 开头,是一种特殊的自定义行间属性.指令属性的预期值是一个表达式,指令的职责就是:表达式的值改变时,相应地将某些行为应用到DOM上.只有v-for是一个类 ...

  4. Vue.js 第1章 Vue常用指令学习

    今日目标 能够写出第一个vue应用程序 能够接受为什么需要学vue 能够使用指令 能够通过指定完成简单的业务(增加删除查询) 能够理解mvvm 为什么要学习vue 企业需要 可以提高开发效率 实现vu ...

  5. vue常用指令

    1.v-if系列 v-if="数据|判断" 只要条件成立,就显示if中的元素 v-else (注意:必须跟在v-if或者v-if-else的后面,不然失效) 如果if条件不成立显示 ...

  6. vue常用指令总结

    一.vue指令 官网解释 指令 (Directives) 是带有 v- 前缀的特殊特性.指令特性的值预期是单个 JavaScript 表达式 (v-for 是例外情况).指令的职责是,当表达式的值改变 ...

  7. Vue常用指令详解分析

    Vue入门 Vue是一个MVVM(Model / View / ViewModel)的前端框架,相对于Angular来说简单.易学上手快,近两年也也别流行,发展速度较快,已经超越Angular了.比较 ...

  8. Vue.js之常用指令

    vue常用指令 vue.js官方给自己的定义是数据模板引擎,并给出了一套渲染数据的指令.本文详细介绍vue.js的常用指令. 官网:点我 一.v-text.v-html v-text:用于绑定文本 v ...

  9. Vue常用语法及命令

    1,Vue常用语法 vue常用语法之变量的定义 // 1,变量相关 // 变量的提升 var username = "雪雪"; var username ; console.log ...

随机推荐

  1. Java多线程(六) —— 线程并发库之并发容器

    参考文献: http://www.blogjava.net/xylz/archive/2010/07/19/326527.html 一.ConcurrentMap API 从这一节开始正式进入并发容器 ...

  2. 用ul li实现边框重合并附带鼠标经过效果

    边框重合这个效果并不难,只是我们没有真正的动手做过而已,下面让我们来谈谈用ul li如何实现边框重合,并附带鼠标经过效果 <!DOCTYPE html> <html lang=&qu ...

  3. final，finally和 finalize的区别

    中等区别: 虽然这三个单词在Java中都存在,但是并没有太多关联:  final:java中的关键字,修饰符. 1.如果一个类被声明为final,就意味着它不能再派生出新的子类,不能作为父类被继承.因 ...

  4. 【spring学习笔记二】Bean

    ### bean的三种实例化方式: 1.构造 2.静态工厂 3.实例工厂 其中,工厂就是工厂的概念,工厂函数factor-method会返回她生产出来的产品类. 而构造初始化也可以选择初始化方式和销毁 ...

  5. 洛谷 P2184 贪婪大陆 解题报告

    P2184 贪婪大陆 题目背景 面对蚂蚁们的疯狂进攻,小\(FF\)的\(Tower\) \(defence\)宣告失败--人类被蚂蚁们逼到了\(Greed\) \(Island\)上的一个海湾.现在 ...

  6. 【bzoj1483】 HNOI2009—梦幻布丁

    http://www.lydsy.com/JudgeOnline/problem.php?id=1483 (题目链接) 题意 $n$个布丁摆成一行,进行$m$次操作.每次将某个颜色的布丁全部变成另一种 ...

  7. zookeeper和PHP zookeeper和kafka 扩展安装

    http://blog.csdn.net/fenglailea/article/details/52458737#t3   目录(?)[-] 安装zookeeper 1直接安装zookeeper无须编 ...

  8. GoLand语言快捷键

    快捷键 作用 备注 ctrl + n 导航到类名 ctrl + shift + n 导航到文件 ctrl + e/ctrl + shift + e 打开到最近的文件/打开最近修改的文件 ctrl + ...

  9. C++ explicit constructor/copy constructor note

    C++:explict 作用显示声明构造函数只能被显示调用从而阻止编译器的隐式转换,类似只能用()显示调用,而不能=或者隐式调用 #include <iostream> #include ...

  10. noip2017考前整理(未完)

    快考试了,把我以前写过的题回顾一下.Noip2007 树网的核:floyd,推出性质,暴力.Noip2008 笨小猴:模拟Noip2008 火柴棒等式:枚举Noip2008 传纸条:棋盘dpNoip2 ...