Vue学习笔记（模版语法）

缺乏、安全感 2022-05-16 07:20 226阅读 0赞

#### 1.data基础用法 ####

在data部分声明的字符串，template部分可以以\{ \{\}\}的形式直接引用

<template> <div> <div>data:{ { msg}}</div>  </div> </template> <script> export default { data(){ return{ msg:'helloworld' } } } </script>

#### 2.直接嵌入js代码 ####

<template> <div> <div>{ { number + 1}}</div>  </div> </template> <script> export default { data(){ return{ number:1 } } } </script>

#### 3.v-html指令 ####

v-html可以提供输出HTML代码的功能

<template>
      <div>
        <div v-html="rawHtml"></div>  
         
      </div>
    </template>
    <script> export default { data(){ return{ rawHtml: '<li>123</li>' } } } </script>

#### 4.v-bind指令 ####

v-bind用于绑定HTML属性

<template>
      <div>
        <div v-bind:class="red">123</div>
        
      </div>
    </template>
    <script> export default { data(){ return{ red:'red active' } } } </script>

#### 4.v-on指令 ####

v-bind用于绑定事件监听器

<template>
      <div>
        <div v-on:click="say()">点击我</div>
      </div>
    </template>
    <script> export default { data(){ return{ }, methods:{ say(){ alert('Hi'); } } } } </script>

#### 4.监听器 ####

<template> <div> <div>{ { message | capitalize}}</div>  </div> </template> <script> export default { data(){ return{ message: 'message' }, filters:{ capitalize(){ return '123' } } } } </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，226人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue学习笔记（篇二）——Vue基础语法

Vue 基础语法 1、Mustache语法 > 形如"< h2 >\{ \{message\}\}< h2 >"的语法格式，称之为Mustache语法 > > 注

布满荆棘的人生/ 2023年10月08日 12:55/ 0 赞/ 84 阅读

相关 django学习笔记4:模版

django模板先在test1中添加一个templates目录用来放模板修改mytest\\test1\\views.py coding:utf-8

偏执的太偏执、/ 2022年09月22日 14:52/ 0 赞/ 202 阅读

相关 Vue.js（3）：模版语法

Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层组件实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被

た入场券/ 2022年09月14日 09:19/ 0 赞/ 180 阅读

相关笔记 vue.js中的模版语法小结

Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。 Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的

淩亂°似流年/ 2022年06月04日 05:52/ 0 赞/ 179 阅读

相关 Vue学习笔记（模版语法）

1.data基础用法在data部分声明的字符串，template部分可以以\{ \{\}\}的形式直接引用 <template> <div> <div>dat

缺乏、安全感/ 2022年05月16日 07:20/ 0 赞/ 227 阅读

相关 vue官网学习笔记（二）模板语法

插值纯HTML 双大括号会将数据解释为纯文本，而非HTML。为了输出真正的HTML，需要使用v-html指令： <div v-html="rawHtml

忘是亡心i/ 2022年04月23日 03:20/ 0 赞/ 213 阅读

相关【学习笔记】CSS语法笔记

使用使用外部CSS <link href="css/styles.css" type="text/css" rel="stylesheet

妖狐艹你老母/ 2022年04月18日 03:32/ 0 赞/ 352 阅读

相关【学习笔记】python语法笔记

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

素颜马尾好姑娘i/ 2022年03月18日 15:06/ 0 赞/ 407 阅读

相关 vue官方教程学习笔记 - 模板语法

Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范

悠悠/ 2021年09月19日 06:56/ 0 赞/ 385 阅读

相关 vue.js学习笔记--基本语法

文章目录一、插值操作： mustache语法 v-once v-html v-text v-pre v-cloak 二、绑定属性（v-bind）： 1.基本使用 2.v...

系统管理员/ 2021年03月25日 14:20/ 0 赞/ 726 阅读