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

2023-12-23 22:43:03

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>

码农公寓

属性(不完全懂)

指令

参数

相关文章