<!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. wallet.metamask.io 网页版钱包 connecting unknown network导致页面卡住

    之前在还不是十分懂用的时候想要用其连接本地的打开的ganache,所以就像使用本地插件的metamask一样,点击custom rpc,然后输入http://localhost:7545,然后页面就一 ...

  2. logbak 配置相关

    一.配置简单 1. 配置简单,易于上手,通过logback.xml文件进行配置,如果没有配置的话,执行默认配置 <configuration> <appender name=&quo ...

  3. 使用cmd导出mysql数据到excel

    windows环境 (有时候复制的不好使,最好可以手动输入一次试试) 1.windows + R 输入cmd弹出命令框 2.cd  C:\Program Files\MySQL\MySQL Serve ...

  4. Objective-C GCD深入理解

    GCD(Grand Central Dispatch),主要用于多线程编程.它屏蔽了繁琐的线程实现及管理细节,将其交由系统处理.开发者只需要定义任务block(在底层被封装成dispatch_cont ...

  5. Objective-C autoreleasepool深入理解

    Objective-C autorelease // main.m int main(int argc, char * argv[]) { @autoreleasepool { } } clang - ...

  6. Android学习之基础知识十—内容提供器（Content Provider）

    一.跨程序共享数据——内容提供器简介 内容提供器(Content Provider)主要用于在不同的应用程序之间实现数据共享的功能,它提供了一套完整的机制,允许一个程序访问另一个程序中的数据,同时还能 ...

  7. MySQL（九）插入、更新和删除

    常用的SQL语句,除了select用于查询,还有insert.update.delete等. 一.insert insert:用来插入(或添加)行到数据库中,常见方式有以下几种: ①插入完整的行: ② ...

  8. flask-script&flask-migrate使用

    一.简介 Flask-script扩展提供向Flask插入外部脚本的功能,包括运行一个开发用的服务器,一个定制的Python shell.设置数据库的脚本.cronjobs及其他运行在web应用之外的 ...

  9. 腾讯云 ubuntu 上tomcat加载项目很慢

    问题原因 随机数引起线程阻塞. tomcat不断启动,关闭, 启动关闭.几次后会出现卡死状况.需很久才能加载完成 阿里云同样配置,同样系统,则很难出现卡死状况.  即使出现过几十秒后也会释放出来. 而 ...

  10. Ionic2 App Import BrowserAnimationsModule or NoopAnimationsModule问题

    在开发app的过程中遇见了动画相关方面的问题,具体如下: 解决方法是:在app.module.ts模块中引入BrowserAnimationsModule import { BrowserAnimat ...