Vue.js 学习日志——语法（二）

最新推荐文章于 2024-08-26 13:26:44 发布

不会爬树的程序猿

最新推荐文章于 2024-08-26 13:26:44 发布

阅读量358

点赞数 3

分类专栏： Vue.js 学习文章标签： Vue Vue.js Vue指令

本文链接：https://blog.csdn.net/a646698961/article/details/94852558

版权

Vue.js 学习专栏收录该内容

12 篇文章 0 订阅

订阅专栏

Vue.js语法

Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。
Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。
结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。

{{ }} 文本插值

数据绑定常见的形式使用{{ }}双大括号进行文本插值。

v-html 指令

v-html 指令用于输出html代码。

v-bind 指令

v-bind 指令用于绑定html中属性的值。

完整语法：

<a v-bind:href="url"></a>

缩写：

<a :href="url"></a>

v-if 指令

v-if 指令根据表达式的值(true/false)进行相应的操作。

v-on 指令

v-on指令用于监听 DOM 事件。

完整语法：

<a v-on:click="dosomething"></a>

缩写：

<a @click="dosomething"></a>

v-model 指令

v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。

表达式

Vue.js 提供了完全的 JavaScript 表达式支持。

过滤器

Vue.js 允许自定义过滤器，被用作一些常见的文本格式化。

过滤器函数接受表达式的值作为第一个参数。

<!-- 两个大括号中 -->
{{str | capitalize}}

<!-- v-bind指令中 -->
<div v-bind:id="Id | formatId"></div>

实例代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue.js模板语法</title>
<style type="text/css">
  .ct {text-align:center}
</style>
<script src="../static/vue.min.js"></script>
</head>
<body>
  <!-- 文本 {{ }} -->
  <div id="div1">
    <p>{{ msg }}</p>
  </div>
	
  <!-- 输出html代码 v-html -->
  <div id="div2">
    <div v-html="html"></div>
  </div>
	
  <!-- 属性  v-bind -->
  <div id="div3">
    <label>是否居中</label>
    <input type="checkbox" v-model="flag" id="r1">
    <div v-bind:class="{'ct':flag}">
      v-bind:class 指令
    </div>
  </div>
	
  <!-- 表达式 -->
  <div id="div4">
    <br>
    <label>支持完全的 JavaScript 表达式</label><br>
    {{ok ? "yes" : "no"}}<br>
    {{str.replace("World","Vue.js")}}
  </div>
	
  <!-- 
      指令 v-
      指令是带有 v- 前缀的特殊属性。
      指令用于在表达式的值改变时，将某些行为应用到 DOM 上。
      v-if 指令将根据表达式print的值(true或false)来决定是否插入p元素。
  -->
  <div id="div5">
    <p v-if="print">现在你能看到输出</p>
  </div>
	
  <!-- 
      参数 
      参数在指令后以冒号指明 
      v-bind 指令被用来响应地更新 HTML 属性
      v-on 指令，它用于监听 DOM 事件<a v-on:click="dosomething">
  -->
  <div id="div6">
    <a v-bind:href="url">Vue.js官网</a>
  </div>
	
  <!-- 
      过滤器
      Vue.js 允许你自定义过滤器，被用作一些常见的文本格式化。
      字符串第一个字母转为大写
  -->
  <div id="div7">
    {{str | capitalize}}
  </div>
	
  <script type="text/javascript">
    new Vue({
      el : "#div1",
      data : {msg:"文本数据绑定"}
    });
    new Vue({
      el : "#div2",
      data : {html:"<h1>输出html代码</h1>"}
    });
    new Vue({
      el : "#div3",
      data : {flag:false}
    });
    new Vue({
      el : "#div4",
      data : {
        ok:false,
        str:"Hello World"
      }
    });
    new Vue({
      el : "#div5",
      data : {print:true}
    });
    new Vue({
      el : "#div6",
      data : {url:"https://cn.vuejs.org"}
    });
    new Vue({
      el : "#div7",
      data : {str:"hello"},
      filters : {
        capitalize: function (value) {
          if (!value) 
            return ''
          value = value.toString()
          return value.charAt(0).toUpperCase() + value.slice(1)
        }
      }
    });
  </script>
</body>
</html>