<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="../assets/vue.js"></script>

</head>

<body>

    <div id="app">

        <h1 v-text="number">{{msg}}</h1>

        <h1 v-html="content" @click="gr"></h1>

        <div :title="title" v-show="isShow"></div>

        <button @click="show">mybutton</button>

        <input type="text" v-model="x">

        <div v-if="isshow"></div>

        <!--<div>{{x}}</div>-->

        <!--姓<input type="text" v-model="f">-->

        <!--名<input type="text" v-model="l">-->

            <!--<div>{{all}}</div>-->

        <!--<div>{{count}}</div>-->

        <div v-for="item,index of list" :key="item">

            {{item}}

        </div>

<script>

     let app = new Vue({

         el:'#app',

         template:'',

         data:{

             msg:'world',

             number:,

             content:'<h1>23</h1>',

             title:'this is666',

             x:'',//双向绑定必须写占位。

             f:'小',

             l:'白',

             count:,

             isShow:true,

             isshow:true,

             list:[,,,]

         },

         computed:{ //用来计算属性的

             all:function () {

                 return this.f+''+this.l

             }

         },

         methods:{

             gr(){

                 this.content = '<h4>2</h4>'

                 //如果data中不存在，就会去computed中找这个属性，如果找不到

                 // ，就会默认在methods中找。vue的机制与node一样

             },

             show(){

                 this.isshow =!this.isshow;

                 // this.isShow=!this.isShow;

                 //v-show 不会把元素从dom中移除

                 //v-if会让元素消失

             }

         },

         watch:{ //监听

             f(){

                 this.count++;

             },

             l(){

                 this.count++;

             }

         }

     })

</script>

</body>

</html>
 v-model = 'content' {{contents}} //vue 双向视图的绑定

v-text  只能返回一个文本内容

v-html 不仅可以返回文本内容还可以返回html标签

v-for item ,index  in items :key='index'

//vue的for循环时，必须绑定一个：key的属性 不然会有一个警告 并且也会提升渲染性能。

需要注意的是 key的值不能相同，所有如果在遇到如数组的情况下 ，我们可以使用index去暂时代替。建议并希望这样做。

v-bind 可以缩写成 ：

v-on 可以缩写成@一个事件名

v-show 可以动态的让元素消失或者隐藏 但是不会让元素移除

v-if v-else v-else-if 也可让元素消失或者隐藏 但是他会直接让这个元素直接移除。

在使用双向绑定的时候。我们需要在data内进行一个占位操作。即设置一个需要解析的属性名称。

//===

methods 在vue中是用来写逻辑方法的

computed 在vue中是用来计算属性的。

watch：是用来监听某个元素或者属性的变化的。

Vue 的语法的更多相关文章

  1. python 全栈开发，Day89(sorted面试题,Pycharm配置支持vue语法,Vue基础语法,小清单练习)

    一.sorted面试题 面试题: [11, 33, 4, 2, 11, 4, 9, 2] 去重并保持原来的顺序 答案1: list1 = [11, 33, 4, 2, 11, 4, 9, 2] ret ...

  2. idea 添加 VUE 的语法支持和开发

    <一>VUE的开发分两种,一种是直接在HTML文件中使用,一种是VUE文件的形式开发 1,首先我们先让 HTML 文件支持 VUE 的语法指令提示 2,File -> Setting ...

  3. 2-5 vue基础语法

    一.vue基础语法 语法: {{msg}} html赋值: v-html="" 绑定属性: v-bind:id="" 使用表达式: {{ok? "ye ...

  4. Vue常用语法及命令

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

  5. Vue模板语法(二)

    Vue模板语法(二) 样式绑定  class绑定 使用方式:v-bind:class="expression" expression的类型:字符串.数组.对象 1.2 style绑 ...

  6. Vue模板语法(一)

    Vue模板语法 一.插值 1.1.1 文本 {{msg}} 1.1.2 html 使用v-html指令用于输出html代码 1.1.3 属性 HTML属性中的值应使用v-bind指令 1.1.4 表达 ...

  7. idea 添加 VUE 的语法

    1,首先我们先让 HTML 文件支持 VUE 的语法指令提示 2,File -> Setting -> Edit -> Inspections -> html 3.加入以下: ...

  8. Vue模板语法（一）

    Vue模板语法 一 vue简介 Vue.js是一套构建用户界面的渐进式框架. 与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计. Vue 的核心库只关注视图层,并且非常容易学习,非常容易与 ...

  9. 一、vue基础--语法

      用到的前台编程工具是Visual Studio Code,暂时是官网下载vue.js到本地使用 一.Visual Studio Code需要安装的插件: jshint :js代码规范检查 Beau ...

  10. 一、vue基础语法（轻松入门vue）

    轻松入门vue系列 Vue基础语法 一.HelloWord 二.MVVM设计思想 三.指令 1. v-cloak 2. v-text 3. v-html 4. v-show 4. v-pre 5. v ...

随机推荐

  1. SQL update select结合语句详解及应用

    QL update select语句 最常用的update语法是: 1 2 UPDATE TABLE_NAME SET column_name1 = VALUE WHRER column_name2 ...

  2. 关于RBAC（Role-Base Access Control）的理解(转)

    基于角色的访问控制(Role-Base Access Control) 有两种正在实践中使用的RBAC访问控制方式:隐式(模糊)的方式和显示(明确)的方式. 今天依旧有大量的软件应用是使用隐式的访问控 ...

  3. 使用k8s cronjob ,清除应用生成的日志文件

    目前应用日志,tomcat日志 统一输出到 /data/logs/pod名字/ 目录下,并且/data/logs 目录挂载到cephfs上, tomcat 日志使用 cronolog进行日志切割 使用 ...

  4. Java并发（二）异步转同步

    目录 前置条件:构造一个异步调用 一.使用wait和notify方法 二.使用条件锁 三.Future 四.使用CountDownLatch 五.使用CyclicBarrier 总结 在Java并发编 ...

  5. 提示文件过大无法复制到U盘怎么解决

    1.U盘作为一个便携的移动存储工具,在我们的生活中扮演重要的角色,但 是我们经常会遇到在复制文件到U盘中的时候,U盘明显有很大的空间,却 提示文件过大无法复制,今天,我教大家一步解决这个问题!! 2. ...

  6. Ubuntu系统多屏幕时 触摸屏如何分屏定位

    有很多的使用我们需要在Ubuntu系统中使用多屏幕的情况,但是有的时候是一个屏幕的触摸屏幕,另一个屏幕是非触摸屏幕,但是问题来了, 有的时候在触摸屏幕上点击的时候竟然在非触摸的响应,这种情况非常不友好 ...

  7. http协议进阶（四）报文首部

    之前写的关于报文首部的传送门: 报文首部:http://www.cnblogs.com/imyalost/p/5708445.html 通用首部字段:http://www.cnblogs.com/im ...

  8. co模块源码学习笔记

    // Sorrow.X --- 添加注释,注释纯属个人理解 /** * slice变量 引用 数组的 slice方法 */ var slice = Array.prototype.slice; /** ...

  9. run `npm audit fix` to fix them, or `npm audit` for details

    问题 added 246 packages from 681 contributors and audited 382 packages in 17.509s found 13 vulnerabili ...

  10. springboot 中事件监听模型的一种实现

    目录 定义事件本身 定义事件源 定义监听者 一.需要实现 ApplicationListener 二.使用 @EventListener 注解 测试 项目结构 前言: 事件监听模型是一种常用的设计模式 ...