<!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. 如何使用openscad绘制一个简单的键帽.

    1 新建空项目 2测数据 测量得出数据.这个长方体的长宽高分别是1.6.4.6.8 注意,这三个数据并不是测量得到的数据,而且加了一点公差值(为3D打印做准备) 3画图 写代码 导入模型 为了方便以后 ...

  2. (转)linux下查看已安装的软件与卸载

    因为linux安装软件的方式比较多,所以没有一个通用的办法能查到某些软件是否安装了.总结起来就是这样几类: 1.rpm包安装的,可以用rpm -qa看到,如果要查找某软件包是否安装,用 rpm -qa ...

  3. win10下乌龟git安装和使用（转）

    文章转自http://blog.csdn.net/jdsjlzx/article/details/51098588 一.安装git for windows 首先下载Git for windows客户端 ...

  4. leetcode 235. Lowest Common Ancestor of a Binary Search Tree 236. Lowest Common Ancestor of a Binary Tree

    https://www.cnblogs.com/grandyang/p/4641968.html http://www.cnblogs.com/grandyang/p/4640572.html 利用二 ...

  5. Objective-C weak深入理解

    1.weak是弱引用,所引用的对象计数不会加1. 2.weak变量在其引用的对象被销毁之后,会被置为nil. 3.weak通常用于block, delegate, NSTimer,以解决循环引用带来的 ...

  6. WIFI底座

    自己贴片的51+WIFI的开发板终于到了..还是贴片的好看 美中不足的是需要改一个电阻的阻值..还有就是由于自己的8266和51单片机一块断电上电,所以如果用的USB线的质量不好就会出现 下载不了程序 ...

  7. [03] JSP指令

    1.概述 JSP指令用于"转换阶段"提供整个JSP页面的相关信息,影响由JSP页面生成的Servlet的整体结构.指令不会产生任何的输出到当前的输出流中. 指令的基本语法为: &l ...

  8. MFC入门（一）-- 第一个简单的windows图形化界面小程序（打开计算器，记事本，查IP）

    ////////////////////////////////序//////////////////////////////// 大约三年前,学过一些简单的编程语言之后其实一直挺苦恼于所写的程序总是 ...

  9. sql 语言

    sql 语言 DDL DDL 全称 Data Definition Language,即数据定义语言. DATABASE 创建数据库 CREATE DATABASE 语句用于创建数据库. CREATE ...

  10. POI Sax 事件驱动解析Excel2003文件

    POI事件驱动解析Excel文件 package com.boguan.bte.util.excel; import java.io.FileInputStream; import java.io.I ...