<!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. 2257: [Jsoi2009]瓶子和燃料

    题意:给你n个数字,然后让你选出k个,这k个数字进行任意组合,问得到的最小结果是多少? 数学知识: 分析:根据题意得出数学公式: 那么,如何在n个之中选出k个呢?其实不用选,因为直接计算各个因子,然后 ...

  2. Smith Numbers POJ - 1142 （暴力+分治）

    题意:给定一个N,求一个大于N的最小的Smith Numbers,Smith Numbers是一个合数,且分解质因数之后上质因子每一位上的数字之和 等于 其本身每一位数字之和(别的博客偷的题意) 思路 ...

  3. 【转】联想笔记本进入u盘启动项操作方法详解

    win7之家小编最近可是对联想笔记本进入u盘启动项的方法很有兴趣啊,那么联想进入u盘启动到底要怎么操作呢?其实方法是有的,因为小编就是研究联想进入u盘启动出身的,下面小编就给大家带来史上最详细的联想笔 ...

  4. 市场不相信眼泪：AI第一股暴力裁员 惨了

    近日,有网友在社交平台匿名爆料称,科大讯飞准备优化30%的正式员工. 还有人匿名爆料,科大讯飞无补助报销出差加班,迫使员工离职,并将矛头指向了一个叫“黄狗子”“黄国庆”的角色. 有媒体猜测,科大讯飞采 ...

  5. C# 语法二 值类型引用类型

    1.值类型 2.引用类型 一 值类型 值类型存放在栈中,引用类型存放在堆中. 值类型有:数值.布尔.字符,例如:int i;bool i2;char cr='a'; 二 引用类型 大多数类型是引用类型 ...

  6. jsp中使用原生js实现异步交互

    Ajax的工作原理相当于在用户和服务器之间加了—个中间层,使用户操作与服务器响应异步化.并不是所有的用户请求都提交给服务器,像—些数据验证和数据处理等都交给Ajax引擎自己来做,只有确定需要从服务器读 ...

  7. BootStrap学习(7)_轮播图

    一.轮播图 Bootstrap 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式.除此之外,内容也是足够灵活的,可以是图像.内嵌框架.视频或者其他您想要放置的任何类型的内容. 如果 ...

  8. 给 MSYS2 添加中科大的源

    最近一段时间不知怎么的,使用默认的 MSYS2 源升级软件或是安装新软件的特别的慢.所以就翻了翻国内的几个开源软件的镜像库,发现中科大的库里就有 MSYS2.所以就研究了一下,给 MSYS2 添加了中 ...

  9. .Net Core Cookie-Based认证与授权

    .Net Core的其中一种认证与授权模式是基于Cookie的,首先我们先创建一个.Net Core MVC 项目: 然后增加对页面访问的权限控制,对要访问的页面Conytroller增加Author ...

  10. [尝鲜]妈妈再也不用担心 dotnet core 程序发布了: .NET Core Global Tools

    什么是 .NET Core Global Tools? Global Tools是.NET Core 2.1 中一个初次出现的特性.Global Tools提供了一种方法,让开发人员编写的.NET C ...