<!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. IMAGENT CLASSIFICATION WITH DEEP CONVOLUTIONAL NEURAL NETWORKS（翻译）

    0 - 摘要  我们训练了一个大型的.深度卷积神经网络用来将ImageNet LSVRC-2010竞赛中的120万高分辨率的图像分为1000个不同的类别.在测试集上,我们在top-1和top-5上的错 ...

  2. Light oj 1021 - Painful Bases

    题意:  给一个B进制的数,一个10进制的数K,B进制数有x位, 对着x位进行全排列的话,有x!种可能, 问这x!的可能中,有多少种可以整除K,各个位置上的数字都不同. 思路:状态压缩,数位DP #i ...

  3. HDOJ 1698 Just a Hook （线段树）

    题目: Problem Description In the game of DotA, Pudge’s meat hook is actually the most horrible thing f ...

  4. cosmic_download-AsyncPool待修正

    # !/usr/bin/env python # -*- coding: utf-8 -*- # @Time : 2018/11/16 10:02 AM # @Author : cxa # @File ...

  5. 一个优秀windows C++ 程序员该有哪些知识

  6. ffmpeg h264 encdoer 速度对比

    h264_qsv frame= 250 fps=0.0 q=-0.0 Lsize= 1401kB time=00:00:10.00 bitrate=1146.8kbits/s speed= 14x l ...

  7. Nodejs脚手架搭建基于express的应用

    原文链接:https://www.cnblogs.com/FE-yanyi1993/p/6413042.html 这篇写的非常详细,此处只做记录. 1.安装生成器 $ npm install expr ...

  8. 2-HTML Text Formatting Elements

    下表列举了文字格式常见的关键字 Tag Description <b> Defines bold text <em> Defines emphasized text  < ...

  9. Windows中查看端口占用及关闭对应进程

    开始--运行--cmd 进入命令提示符 输入netstat -ano 即可看到所有连接的PID,之后在任务管理器(右键电脑屏幕的状态栏即可找到)中找到这个PID所对应的程序.如果任务管理器中没有PID ...

  10. 接口签名进行key排序,并MD5加密

    import org.apache.commons.codec.digest.DigestUtils; import java.io.UnsupportedEncodingException; imp ...