第六篇:vue.js模板语法(,属性,指令,参数)

Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。

结合响应系统,在应用状态改变时, Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。(看不懂,不管)

属性(不完全懂)

v-bind是什么东西:HTML 属性中的值应使用 v-bind 指令(我的理解:用html写的东西,就要用v-bind)

v-bind有缩写    v-bind:class 等价于:class         (针不戳)

设计一个可以改变字体颜色和字体背景颜色的程序

<!DOCTYPE html>
<html> <head> <meta charset="utf-8"> <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title> </head> <style> .class1{ background: #444; //对class1的颜色和背景进行设定 color: #eee; } </style> <body> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> <div id="app"> <label for="r1">修改颜色</label> //label与"r1"绑定 <input type="checkbox" v-model="use" id="r1"> //设定一个选择器类型的输入框,双向数据绑定use, <br><br> //这个东西存在是为了空一行,可还行 //然后对应id是:"r1"
<div v-bind:class="{'class1': use}">       //如果use是true就让<div>写的文本用class1的颜色 v-bind:class 指令                  //否则,不用 </div> </div> <script> new Vue({ el: '#app',                       data:{ use: false                      //设定初始状态,true或者false } }); </script> </body>

 

 

指令

指令是带有 v- 前缀的特殊属性。

指令用于在表达式的值改变时,将某些行为应用到 DOM 上。如下例子:

<div id="app">
    <p v-if="seen">现在你看到我了</p>    //这个我把它理解为if条件语句
</div>
    
<script>
new Vue({
  el: '#app',                           //id与上方对应
  data: {
    seen: true                          //seen是ture,"你现在看到我了"才会显示                    
  }
})
</script>

 

参数

参数在指令后以冒号指明。例如, v-bind 指令被用来响应地更新 HTML 属性(更新网页):

<div id="app">
    <pre><a v-bind:href="url">菜鸟教程</a></pre>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    url: 'http://www.runoob.com'     //按钮跳转网页(针不戳),终于学了个实用的东西了
  }
})
</script>

 

上一篇:VUE 动态绑定class类的三种常用方法及适用场景


下一篇:class1