VUE：模板语法

一：何为声明式

安装规定的语法，去实现一些效果（不需要管流程）。

二：模板语法

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <!--

            1    模板的理解：动态的html页面，包含了一些js语法代码

                双大括号表达式

                指令（以v-开头的自定义标签属性）

            2    双大括号表达式

                语法：{{exp}} 或 {{{exp}}}

                功能：向页面输出数据

                可以调用对象的方法

            3    指令一：强制数据绑定

                功能：指定变化的属性值

                完整写法：

                    v-bind:xxx='yyy'    //yyy会作为表达式解析执行

                简洁写法：

                    :xxx='yyy'

            4    指令二：绑定事件监听

                功能：绑定指定事件名的回调函数

                完整写法：

                    v-on:click='xxx'

                简洁写法：

                    @click='xxx'

        -->

        <div id="app">

            <h2>1、双大括号表达式</h2>

            <p>{{msg}}</p>

            <p>{{msg.toUpperCase()}}</p>    <!--msg是变量，可以写js表达式-->

            <p v-text="msg2"></p>    <!-- 写入文本 value    textContent-->

            <p v-html="msg2"></p>    <!-- 转换成html语句    innerHTML-->

            <h2>2、指令一:强制数据绑定</h2>

            <img v-bind:src="imgUrl" />

            <img :src="imgUrl" />

            <h2>3、指令二：绑定事件监听</h2>

            <button v-on:click="test">点击有惊喜</button>

            <button @click="test2(msg)">点击还有惊喜</button>    <!-- 可以传变量-->

        </div>

        <script type="text/javascript" src="../js/vue.js" ></script>

        <script type="text/javascript">

            new Vue({

                el:'#app',

                data:{

                    msg:'taosir is studing...',

                    msg2:'<a href="http://www.baidu.com">taosir is here!</a>',

                    imgUrl:'https://www.baidu.com/img/baidu_jgylogo3.gif'

                },

                methods:{

                    test(){

                        alert("意不意外！");

                    },

                    test2(m){

                        alert(m);

                    }

                }

            })

        </script>

    </body>

</html>

VUE：模板语法（小白自学）的更多相关文章

  1. Vue模板语法(二)

    Vue模板语法(二) 样式绑定  class绑定 使用方式:v-bind:class="expression" expression的类型:字符串.数组.对象 1.2 style绑 ...

  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.js是一套构建用户界面的渐进式框架. 与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计. Vue 的核心库只关注视图层,并且非常容易学习,非常容易与 ...

  4. Vue 模板语法 && 数据绑定

    1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 & ...

  5. 初始Vue、Vue模板语法、数据绑定（2022/7/3）

    文章目录 1.Vue简介 1.1.Vue的安装使用 1.2.实际的运用案例 1.3.vue开发工具的使用(这个需要在浏览器中安装) 2.初始Vue 2.1 .基础知识 2.1 .代码实例 2.2 .页 ...

  6. (Vue)vue模板语法

    Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统. ...

  7. Vue模板语法与常用指令

    Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.在底层的实现上,Vue 将模板编译成虚拟 DOM 渲染函数,结合相应系统,在应用状态改变时 ...

  8. Vue模板语法（二）

    Vue基础模板语法 二 1. 样式绑定 1.1 class绑定      使用方式:v-bind:class="expression"       expression的类型:字符 ...

  9. (32)Vue模板语法

    模板语法 文本: <span>Message: {{ msg }}</span> v-once 一次性地插值,当数据改变时,插值处的内容不会更新 <span v-once ...

  10. 11 - Vue模板语法

    Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据. 所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML ...

随机推荐

  1. 《黑白团团队》第七次作业：团队项目设计完善&编码

    项目 内容 作业课程地址 任课教师首页链接 作业要求 团队项目 填写团队名称 黑白团团队 填写具体目标 认真负责,完成项目 任务1:团队软件项目设计完善 Github仓库上传<软件设计方案说明书 ...

  2. 00064_字符串缓冲区_StringBuffer类

    1.StringBuffer类 (1)StringBuffer又称为可变字符序列,它是一个类似于 String 的字符串缓冲区,通过某些方法调用可以改变该序列的长度和内容. (2)tringBuffe ...

  3. CF894A QAQ

    CF894A QAQ 题意翻译 题目大意: 给定一个字符串,字符串长度<=100,现在要求出字符串中'QAQ'的个数,注意,'QAQ'可以不连续,只要有顺序就可以了,例如QABQ也有一个QAQ ...

  4. C++ 嵌入汇编程序提高计算效率

    因为汇编语言比C++更接近硬件底层,所以在性能要求高的程序中往往能够採取在C++代码中嵌入汇编的方式来给程序提速. 在VC中能够简单的通过 __asm { //在这里加入汇编代码 } 来实现. 以下通 ...

  5. 网页爬虫框架jsoup介绍

    序言:在不知道jsoup框架前,因为项目需求.须要定时抓取其它站点上的内容.便想到用HttpClient方式获取指定站点的内容.这样的方法比較笨,就是通过url请求指定站点.依据指定站点返回文本解析. ...

  6. UVA 1515 Pool construction 最大流跑最小割

    Pool construction You are working for the International Company for Pool Construction, a constructio ...

  7. Oracle 11g 学习3——表空间操作

    一.表空间概述 表空间是Oracle中最大的逻辑存储结构,与操作系统中的数据文件相相应: 基本表空间:一般指用户使用的永久性表空间,用于存储用户的永久性数据          暂时表空间: 主要用于存 ...

  8. java应用集锦9:httpclient4.2.2的几个常用方法，登录之后访问页面问题，下载文件

    转账注明出处:http://renjie120.iteye.com/blog/1727933 在工作中要用到android,然后进行网络请求的时候,打算使用httpClient. 总结一下httpCl ...

  9. 英语发音规则---N字母

    英语发音规则---N字母 一.总结 一句话总结: 1.位于词尾的n在m后面时不发音? autumn /'ɔːtəm/ n. 秋天 column /'kɒləm/ n. 纵队 2.在音素/k//g/前面 ...

  10. Nosql的实际应用场景

    怎么样把NoSQL引入到我们的系统架构设计中,需要根据我们系统的业务场景来分析,什么样类型的数据适合存储在NoSQL数据库中,什么样类型的数据必须使用关系数据库存储.明确引入的NoSQL数据库带给系统 ...