<!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. A Simple Problem with Integers POJ - 3468 (分块)

    题目链接:https://cn.vjudge.net/problem/POJ-3468 题目大意:区间加减+区间查询操作. 具体思路:本来是一个线段树裸题,为了学习分块就按照分块的方法做吧. 分块真的 ...

  2. Django学习手册 - csrf

    CSRF csrf原理 无csrf时存在隐患 Form提交 Ajax提交 默认为全局都csrf Form表单提交方式: <div> <form action="/login ...

  3. C++ 引用变量

    int rats; int & rodents = rats; rats 和 rodents 可以互换,他们指向相同的值和内存单元.其实就是给rats取了别名rodents. 修改其中任意一个 ...

  4. 在maven项目中引用ueditor报错问题

    遇到的问题:将pom.xml中引入 <dependency> <groupId>com.baidu</groupId> <artifactId>uedi ...

  5. cartographer 安装

    Debian 8 Jessie 一顿操作梦如虎,最后不知道咋装上的. 参考:https://www.jianshu.com/p/9922a51ce38f https://blog.csdn.net/p ...

  6. docker部署Javaweb环境数据库连接问题

    最近在docker部署了一个Javaweb项目运行的环境,在容器中部署了mysql和Javaweb项目,但是本地可以跑项目,放到容器里面不行. 具体报错内容是不能访问数据库. Could not ge ...

  7. js变量的解构赋值

    今天在学习时看到几段代码,让我感叹JS的灵活,特此一记: let stateObj = {a:1,b:3}; let newObj = {b:13,c:4} ; stateObj = {...stat ...

  8. 【SCOI2010】序列操作

    各种繁琐的线段树标记操作...赤裸裸的码农题. 调了一个晚上,最后写篇题解. 题解亮点:代码短,~~跑得慢(连第一页都没挤进去)~~ 其实我跟你们说啊,代码短是好事~~(这里不是说压行好,我的代码不压 ...

  9. Cnblog-Latex数学公式使用测试

    *默认不支持换行的数学公式 1. \(a+b=c\) $a+b=c$ 2. \[a+b=c\] $$a+b=c$$ 3. $alpha$ $\alpha$ $pi$ $\pi$ 4. $\Gamma$ ...

  10. 028_shell脚本递归求值

    一. #!/bin/sh factorial() { if [ "$1" -gt "1" ]; then i=`expr $1 - 1` j=`factoria ...