Vue基础 - 模板语法，常用指令

最新推荐文章于 2024-07-12 14:10:05 发布

狗熊掰棒棒

最新推荐文章于 2024-07-12 14:10:05 发布

阅读量224

点赞数

分类专栏：前端文章标签： vue.js html5

本文链接：https://blog.csdn.net/Ferris_/article/details/103766702

版权

前端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

Vue基础 - 模板语法，常用指令

Vue是什麽

Vue是一个构建数据驱动web界面的渐进式框架。

Vue例子

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Hello Vue!</title>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
</head>

<body>
    <div id="app" class="myApp">
        <ul>
            <li v-for="item in books">{{item.name}}</li>
        </ul>
        <input type="text" v-model="title">
        <p>{{ title }}</p>
    </div>
</body>
<script>
    new Vue({
        el: '.myApp',
        data: {
            title: "欢迎来学习",
            books: [
                { name: "React学习" },
                { name: "Vue学习" },
                { name: "Angela学习" },
            ]
        }
    })
</script>

</html>

Vue模板语法，常用指令

创建package.json

npm init

安装Vue

npm install vue

模板语法

什么是模板语法

基于HTML的模板语法，允许开发者声明式地将DOM绑定至底层Vue实例的数据。
文本（变量）插值

文本（变量）插值

使用“Mustache”语法（双花括号）
```
<div>title:{{title}}</div>
```
在标签上使用v-once，执行一次绑定，titel改变，视图不会发生改变
```
<div v-once>title:{{title}}</div>
```
标签属性插值，使用v-bind指令插值（id），通常可以简写成冒号+变量
```
<div v-bind:id="myId"></div>
<div :id="myId"></div>
```
标签属性插值，使用v-bind指令插值（id），通常可以简写成冒号+变量
```
<div v-bind:id="myId"></div>
<div :id="myId"></div>
```

HTML内容

如果使用“Mustache”语法（双花括号），html内容会原样输出

var htmlStr = '<div style="color:red">我的学习</div>'
<div>title:{{htmlStr}}</div>

在标签上使用v-html，可以解析出正常的html填充下面的div
```
<div v-html='htmlStr'></div>
```

使用JS表达式

Vue支持JavaScript表达式插值

{{number + 1}}, {{ok ? 'Yes': 'No'}},
{{ message.split('').reverse().join('')}}
<div v-bind:id="'list-'+id"></div>

常用指令

什么是指令

指令（Directives）是带有v- 前缀的特殊特性。
指令的职责是，当表达式的值改变时，将其产生的连带影响，响应的作用于DOM。

常用指令

在这里插入图片描述

表单内置指令

在这里插入图片描述

事件绑定

在这里插入图片描述

Demo演示

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="node_modules/vue/dist/vue.min.js"></script>
</head>

<body>
  <div id="app">
    {{title}}
    <div v-once>{{title}}</div>
    <p v-bind:id="myApp">{{title}}</p>
    <p :id="myApp">{{title}}</p>
    <div>{{htmlStr}}</div>
    <div v-html="htmlStr"></div>
    <div>
      {{number + 1}}
    </div>
    <div>
      {{isShow ? 1: 0}}
    </div>
    <div>
      {{str.split(" ").join("，")}}
    </div>
    <div v-if="type === 1">type:{{type}}</div>
    <div v-else-if="type === 2">type:{{type}}</div>
    <div v-else>type:{{type}}</div>
    <div v-show="isShow">type:{{type}}</div>
    <div v-on:click="alert(0)">点我</div>
    <div>
      <ul>
        <li v-for="item in myList">{{item.name}}</li>
      </ul>
    </div>
    <input v-model="title">
    <div>
      <p v-if="isShow">我是p标签</p>
      <button @click="handelClick">点击显示隐藏p标签</button>
    </div>

  </div>
  <script>
    var htmlStr = '<div style="color:red">我的学习</div>'
    let app = new Vue({
      el: "#app",
      data: {
        myApp: "Hello Vue",
        title: "Hello world",
        htmlStr: htmlStr,
        number: 1,
        isShow: true,
        str: "我是中国人 我爱我的祖国",
        type: 3,
        isShow: true,
        myList: [
          { name: 'vue基础课程' },
          { name: 'vue进阶课程' },
          { name: 'vue高级课程' },
          { name: 'vue实战课程' },
          { name: 'vue+webpack课程' },
        ]
      },
      methods: {
        handelClick() {
          this.isShow = !this.isShow;
        }
      }
    })
    app.$data.title = "Hello Vue";
  </script>
</body>

</html>

狗熊掰棒棒

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue基础 - 模板语法，常用指令

VueVue是什麽Vue例子Vue模板语法，常用指令Vue是什麽Vue是一个构建数据驱动web界面的渐进式框架。Vue例子<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="">...
复制链接

扫一扫