<!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. 【NLP CS224N笔记】Lecture 1 - Introduction of NLP

    I. 什么是NLP NLP全称是Natural Language Processing,即自然语言处理,这是一门计算机科学.人工智能以及语言学的交叉学科. NLP涉及的几个层次由下图所示.可以看到输入 ...

  2. 使用SQL*Plus连接数据库

    About SQL*Plus SQL*Plus is the primary command-line interface to your Oracle database. You use SQL*P ...

  3. 鉴权完成后如何拿到SpringSocial的用户信息

    ⒈ package cn.coreqi.social.config; import org.springframework.beans.factory.annotation.Autowired; im ...

  4. Python3-进程池与线程池

    进程池与线程池 在刚开始学多进程或多线程时,我们迫不及待地基于多进程或多线程实现并发的套接字通信,然而这种实现方式的致命缺陷是:服务的开启的进程数或线程数都会随着并发的客户端数目地增多而增多,这会对服 ...

  5. Linux运行时I/O设备的电源管理框架【转】

    转自:https://www.cnblogs.com/coryxie/archive/2013/03/01/2951243.html 本文介绍Linux运行时I/O设备的电源管理框架.属于Linux内 ...

  6. MVC 中Delete 方法报错问题解决方案

    最开始前台ajax提交时代码 function Del(id) { $.ajax({ type: "GET", url: "/Test/Delete", dat ...

  7. /etc/shadow中密码段的生成方式

    why? 为什么要手动生成? 通常情况下,使用passwd命令即可以为用户设置密码,但是在某些情况下是需要先获得加密后的密码然后去操作的,比如,kickstart文件中的rootpw指令,ansibl ...

  8. win7经常出现“关闭xxxx前您必须关闭所有会话框”

    这可能是windows的一个BUG,在没有关闭输入法的状态下它不默认你关闭了所有窗口,只要把输入法切换回默认的英文输入法就可以正常关闭了

  9. VS2015 代码片段整理

    1.什么是代码段? 将一段代码行提取出来,可以多次重复的使用.VS IDE提供对代码段的完整支持.使代码编写更快.更容易.更可靠. 2.系统默认代码段 对于开发人员的例行任务,Visual Studi ...

  10. DCL单例模式

    我们第一次写的单例模式是下面这样的: public class Singleton { private static Singleton instance = null; public static ...