<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue</title>
    <script src="js/AMjs/vue.min.js"></script>
</head>
<body>
<p>修改输入框的值，查看效果：</p>
<div id="app">
    <!--v-bind:命令绑定DOM特性-->
    <span v-bind:title="message">
        鼠标悬停几秒查看此处的提示信息
    </span>
    <p>{{ message }}</p>
    <!--字符串连接-->
    <p>{{message+'网址:www.baidu.com'}}</p>
    <!--字符串反转-->
    <!--<p>{{message.split('').reverse().join('')}}</p>-->

    <!--一次性赋值-->
    <span v-once>这个不会实时改变：{{message}}</span><br>

    <!--事件监听：v-on；reverseMessage()方法必须要定义，否则运行会直接报错-->

　
    <button v-on:click="reverseMessage">点击逆转</button>
　  <!--v-model:实现表单输入和应用状态之间的双向绑定-->
    <input v-model="message">

</div>
<hr><hr><hr>
<!--列表输出-->
<div id="list">
    <ul>
        <li v-for="list in lists">
            {{list.text}}
        </li>
    </ul>
</div>

<hr><hr><hr>
<!--控制切换:seen值为true表示显示，false表示不显示-->

<div id="box">
    <p v-if="seen">
        显示出来了！
    </p>
</div>

<!--组件化应用构建;现在我们为每个 todo-item 提供 todo 对象
      todo 对象是变量，即其内容可以是动态的。
      我们也需要为每个组件提供一个“key”-->
<div id="variable">
    <ol>
        <!--v-bind 指令将待办项传到循环输出的每个组件中-->
        <todo-item
                v-for="item in groceryList"
                v-bind:todo="item"
                v-bind:key="item.id">
        </todo-item>
    </ol>
</div>
<hr><hr><hr>
<div id="app-6">
    <p>{{ message }}</p>
    <input v-model="message">
</div>
<hr><hr><hr>
<div id="app-7">
    <p>{{ message }}</p>
    <input v-model="message">
</div>

<!-- JavaScript 代码需要放在尾部（指定的HTML元素之后） -->

<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'hello  vue!'
        },
        methods: {
            reverseMessage: function () {
                this.message = this.message.split('').reverse().join('')
            }
        }
    })
    var list = new Vue({
        el: '#list',
        data: {
            lists: [
                {text: '学习 JavaScript'},
                {text: '学习 Vue'},
                {text: '整个牛项目'}
            ]
        }
    })

    var app6 = new Vue({
        el: '#app-6',
        data: {
            message: 'Hello 世界!'
        }
    })
    var app7 = new Vue({
        el: '#app-7',
        data: {
            message: 'Hello 这个是另外一个!'
        }
    })

    Vue.component('todo-item', {
        props: ['todo'],
        template: '<li>{{ todo.text }}</li>'
    })

    var variable = new Vue({
        el: '#variable',
        data: {
            groceryList: [
                { id: 0, text: '蔬菜' },
                { id: 1, text: '奶酪' },
                { id: 2, text: '沙拉' }
            ]
        }
    })
</script>

</body>
</html>

vue ：基本语法格式的更多相关文章

  1. Vue常用语法及命令

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

  2. Vue模板语法(一)

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

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

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

  4. Lambda表达式的语法格式

    Lambda表达式的语法格式: 参数列表 => 语句或语句块 “Lambda表达式”是委托的实现方法,所以必须遵循以下规则: 1)“Lambda表达式”的参数数量必须和“委托”的参数数量相同: ...

  5. IIS rewrite映射规则语法格式

    IIS rewrite映射规则语法格式,特殊符号:&请用& amp;代替,否则异常. <configuration> <system.webServer> &l ...

  6. bat 批处理获取时间语法格式

    bat 批处理获取时间语法格式 取年份:echo %date:~0,4%  取月份:echo %date:~5,2%  取日期:echo %date:~8,2%  取星期:echo %date:~10 ...

  7. 用C++对C++语法格式进行分析

    前言 最近C++项目需要用到脚本,这就关系到如何绑定对象到脚本运行环境.因使用到多套脚本语言,所以现有的绑定技术,都不能满足需求.所以只能寻求解析C++的头文件,再根据描述进行绑定.起初发现boost ...

  8. 转载：2.2.2 配置项的语法格式《深入理解Nginx》（陶辉）

    原文:https://book.2cto.com/201304/19627.html 从上文的示例可以看出,最基本的配置项语法格式如下: 配置项名 配置项值1 配置项值2 - ; 下面解释一下配置项的 ...

  9. 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 ...

  10. (转) at&T语法格式 与 at&T - intel格式对比

    原地址 示例: movl (%ebp), %eax, 等同于Intel格式中的 ] ,AT&T中,源操作数在左,目的操作数在右.“l”是Longword,相当于Intel格式中的dword p ...

随机推荐

  1. 关于xss攻击学习的总结

    关于xss攻击,网上相关的介绍很多,一搜索也是一大堆,这里我就对自己感兴趣的一些内容做个总结. xss简单介绍 成因:xss是将恶意代码(多是JavaScript)插入html代码中. 分类: 1. ...

  2. 解码base64加密的图片并打印到前台

    经过base64加密的图片对象是一串字符串,我们解码后可通过流将其打印出来: utils类: package com.aebiz.app.web.modules.controllers.open.ap ...

  3. WebBrowser控件的NavigateToString()方法 参数 为中文时乱码问题的解决。

    public static string ConvertExtendedASCII(string HTML) { StringBuilder str = new StringBuilder(); ch ...

  4. java知识点4

    架构篇 分布式 数据一致性.服务治理.服务降级 分布式事务 2PC.3PC.CAP.BASE. 可靠消息最终一致性.最大努力通知.TCC Dubbo 服务注册.服务发现,服务治理 分布式数据库 怎样打 ...

  5. HSV color space

    计算机图形学原理的课给我们指定了课题然后自己去研究并且做ppt(顺便吐槽一下晚课下课布置作业第二天早课就要交的辣鸡时间安排) 肝了一个晚上 大概知道了一点 先写下来 HSV其实是hue saturat ...

  6. 绕过PALOALTO TRAPS EDR解决方案

    0x1 技术点 PaloAlto Traps(EDR解决方案)基于行为封锁和标记许多黑客工具. 0x2 绕过方法 最简单的解决方案就是禁用内置实用程序,即; Cytool.Cytool是一个集成命令行 ...

  7. 【转】python 历险记（四）— python 中常用的 json 操作

    [转]python 历险记(四)— python 中常用的 json 操作 目录 引言 基础知识 什么是 JSON? JSON 的语法 JSON 对象有哪些特点? JSON 数组有哪些特点? 什么是编 ...

  8. mysql进制之间的转换

    1.十进制转换成二进制 select bin(5); 2.十进制转换成八进制 select oct(5); 3.十进制转换成十六进制 select hex(5); 4.二进制转换成十进制 select ...

  9. 创建一个yum源，rpm安装二进制包

    作者:邓聪聪 安装mariadb vi /etc/yum.repos.d/mariadb.repo [mariadb]name=mariadbbaseurl=http://mirrors.neusof ...

  10. Random() 插入数据重复的问题

    今天在写一个小测试用例时,想在数据库插入一些数据.造数据时用到了Random函数,之前没有注意到这个问题,看到“Random生成随机数重复的问题”才注意到自己插入的数据有重复. ; i < ; ...