首页 > 其他分享> 文章详细

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

2021-09-09 19:04:09 阅读：209 来源： 互联网

标签：el vue bind js class1 Vue 指令属性第六篇

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>

标签：el,vue,bind,js,class1,Vue,指令,属性,第六篇
来源： https://www.cnblogs.com/FatTiger4399/p/15248043.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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

属性(不完全懂)

指令

参数