<!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. 如何使用zabbix初级监控

    如何用zabbix监控(初步使用)? 前提:必须启动mysql 和zabbix目录下的sbin中的zabbix_agentd zabbix_server,还有nginx以及php否则会报错,因为zab ...

  2. 梯度下降（Gradient Descent）

    在求解机器学习算法的模型参数,即无约束优化问题时,梯度下降(Gradient Descent)是最常采用的方法之一,另一种常用的方法是最小二乘法.这里就对梯度下降法做一个完整的总结. 1. 梯度 在微 ...

  3. Intel CPU 漏洞分析

    Intel CPU漏洞分析报告 预备知识 存储分级 由于计算机存储分级的特性(第一级:寄存器,第二级:高速缓存,第三级:内存,第四级:磁盘),每一级之间的访问速度差距高达数量级.所以处理器会将用到的数 ...

  4. Python threading中lock的使用

    版权声明: https://blog.csdn.net/u012067766/article/details/79733801在多线程中使用lock可以让多个线程在共享资源的时候不会“乱”,例如,创建 ...

  5. 【Codeforces Round 1137】Codeforces #545 (Div. 1)

    Codeforces Round 1137 这场比赛做了\(A\).\(B\),排名\(376\). 主要是\(A\)题做的时间又长又交了两次\(wa4\)的. 这两次错误的提交是因为我第一开始想的求 ...

  6. three.js - 动画 图形统计帧频 dat.GUI

    运行一把: 代码解释: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  7. 【vue】chrome已安装Vue Devtools在控制台却无显示

    chrome已安装Vue Devtools在控制台却无显示的解决: 在点亮Vue Devtools图标后,控制台没有vue解读显示. 原因:脚手架配置NODE_ENV直接定义为了production版 ...

  8. vue2.0中使用less

    第一部分:Less语言 与上一篇<vue2.0中使用sass>介绍的Sass语言一样,Less语言也是一种CSS的扩展语言,增加了变量.混合(minin).函数等功能,让CSS更易维护.方 ...

  9. [Oracle]Master表字段扩张时的对应方法

    Master表字段扩张时的对应方法 如果Master表的数据量很大,Master表中的列,宽度扩张了,MVIEW表如何对应处理? 此时,重建MVIEW可能会耗费很长的时间. 可以采用 alter ma ...

  10. 【php增删改查实例】第十四节 - 用户管理模块（起步）

    从这一节开始,开始着手开发部门管理模块. 之后的内容就在此基础上进行增加. 1.用户查询 在目录中建立一个user文件夹,作为我们用户管理的模块. 打开这个文件,新建一个userManage.html ...