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

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

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

属性(不完全懂)

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

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

设计一个可以改变字体颜色和字体背景颜色的程序    html 基本组成单位      tag标签    名字  属性  文本内容 

复制代码
<!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>
复制代码

 

posted @   养肥胖虎  阅读(211)  评论(0)  编辑  收藏  举报
编辑推荐：
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· AI技术革命，工作效率10个最佳AI工具
点击右上角即可分享
微信分享提示
AI IDE Trae