02-模板语法

指令

以v-开头的特殊属性
属性的值 目前可以是单个表达式
作用:当表达式的值改变时,将这种变化响应式的影响dom内容**

  • v-bind
<!--遇到元素的属性值是变化的,动态更新元素属性的时候,这情况应该使用v-bind指令,
这个属性值可以是元素自身的,也可以是自定义的-->
<a v-bind:href="url">这是链接</a>
  • v-on
<!--v-on:(事件名)指令 用于监听dom事件 -->
<a v-on:click="alert">这是v-om:click点击事件</a>
  • v-html
<div id="app1">
    后面是内容哦!
    <p>{{msg}}</p>
    <!--元素的属性值不能用花括号-->
    <!--v-html 作为元素的属性,不会将属性值作为该元素该属性的值,会将该属性值 放入该元素的内部-->
    <p v-html="msg"></p>
</div>
  • 缩写
 <!--    v-bind:属性 可以缩写为 :属性,
         v-on:事件名 可以缩写为 :@事件名
         在所有支持 Vue.js 的浏览器都能被正确地解析,
         这些标记不会出现在最终渲染的标记中。
 -->
 <a :href="url">这是链接</a>
 <a @click="alert">这是@click点击事件</a>

特性

    <!--元素的属性值不能用花括号-->
    <p v-bind:ids="ids">这个属性id是传过来的</p>

    <!--布尔特性:在元素属性中如果是是否类型的, 如果传过来的值是null、undefined 或 false,该元素将不会显示该属性-->
    <button v-bind:disabled="dis1">我是不可用按钮</button>
    <button v-bind:disabled="dis2">我是可用按钮</button>

    <!--js表达式,每个元素的绑定只支持单个的表达式-->
    <p>num:{{num * 100 }}</p>

    <p>{{num>9?"num大于9":"num小于9"}}</p>

    <p>{{txt1}}翻转后是:{{txt1.split("").reverse().join('')}}</p>

    <p v-bind:keys="'data-k'+ids">key属性</p>
  • js如下:
var app1 = new Vue({
        el: "#app1",
        data: {
            // 为了避免xss攻击,尽量不要让用户输入带这些特殊符号的,
            msg: "<span style='color:red;font-size:16px;'>我是新内容哦</span>"
        }
    });
var app2 = new Vue({
        el: "#app2",
        data: {
            ids: "123456",
            // 非0 字符串 对象
            dis1: {},
            // null、undefined 或 false,
            dis2: false,
            num: 10,
            txt1: "hello yunlulu"
        }
    });
  var app3 = new Vue({
        el: "#app3",
        data: {
            url: "http://www.baidu.com"
        },
        methods: {
            alert: function () {
                alert(111);
            }
        }
    });
  

推荐阅读更多精彩内容

  • pdf下载地址:Java面试宝典 第一章内容介绍 20 第二章JavaSE基础 21 一、Java面向对象 21 ...
    王震阳阅读 77,200评论 25 509
  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 2,808评论 0 30
  • 1.安装 可以简单地在页面引入Vue.js作为独立版本,Vue即被注册为全局变量,可以在页面使用了。 如果希望搭建...
    Awey阅读 7,563评论 5 126
  • 星华缭乱半血残, 甜蜜恋风飞满天。 地狱无门自来投, 回旋一扇索命还。
    夕雨柔阅读 44评论 1 2
  • 相关动态REM的文章 移动端高清、多屏适配方案使用Flexible实现手淘H5页面的终端适配 viewport v...
    老虎爱吃母鸡阅读 64评论 0 0