<!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. 课程8：《Maven精品教程视频》--视频目录

    2017年3月18日 老师讲的课程 \day01视频\01maven依赖管理.avi; \day01视频\02maven项目构建.avi; \day01视频\03maven程序安装.avi; \day ...

  2. python基础-----异常问题

    ---恢复内容开始--- 当发生python不知所措的错误时,python会创建一个异常对象, 如果你编写处理该异常的代码,程序将会继续运行: 如果你未对异常做任何处理,程序将会停止,并显示一个tra ...

  3. 引入第三方SDK allowBackup value不一致引起的编译异常

    项目中要引入一个客服的SDK,项目中 <application android:name=".AppApplication" android:allowBackup=&quo ...

  4. python3+selenium入门16-窗口截图

    有时候需要把一些浏览器当前窗口截图下来,比如操作抱错的时候.WebDriver类下.get_screenshot_as_file()方法可窗口截图,需要传入一个截图文件名的路径.window要用\\当 ...

  5. 构建高性能WEB站点之 吞吐率、吞吐量、TPS、性能测试

    内容参考: 构建高性能WEB站点.pdf 一.吞吐率 我们一般使用单位时间内服务器处理的请求数来描述其并发处理能力.称之为吞吐率(Throughput),单位是 “req/s”.吞吐率特指Web服务器 ...

  6. web页面加载、解析、渲染过程

    仅做学习参考,侵权删 原文链接:风吹De麦浪   https://www.cnblogs.com/CandyManPing/p/6635008.html 一.浏览器 浏览器的主要功能是将用户选择的we ...

  7. C# 获取区域和语言值

    其他方法如 System.Globalization.CultureInfo.InstalledUICulture.Name == "zh-CN" 不能获取.只有通过读注册表的方法 ...

  8. hybrid programming based on python and C/C++

    Python/C API Reference Manual¶ https://docs.python.org/3/c-api/index.html Extending and Embedding th ...

  9. android端 socket长连接 架构

    看过包建强的<App研发录>之后对其中的基础Activity类封装感到惊讶,一直想找一种方式去解决关于app中使用socket长连接问题,如何实现简易的封装来达到主活动中涉及socket相 ...

  10. Android&Java面试题大全—金九银十面试必备

    声明本文由作者:Man不经心授权转载,转载请联系原文作者原文链接:https://www.jianshu.com/p/375ad14096b3, 类加载过程 Java 中类加载分为 3 个步骤:加载. ...