VUE01_基本使用、插值表达式、指令、事件绑定、分支循环结构(一)

简介: ①. vue入门概述②. 插值表达式③. 指令(格式:以v-开始(比如:v-cloak))

①. vue入门概述



  • ②. 入门代码展示:


  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
  </head>
  <body>
      <div id="app">   
          <div>{{msg}}</div>
          <div>{{1 + 2}}</div>
          <div>{{msg + '' + 123}}</div>
          <div>{{msg + "" + 123}}</div>
      </div>
  <script src="../js/vue.js"></script>
  <script>
      var appel=document.getElementById("app");
      var vm=new Vue({
           el:'#app',//元素的挂载位置(值可以是css选择器或者DOM元素)
           //el:appel
           data:{    //模型数据:值是一个对象
              msg:'xiaozhi'
           }
      });
  </script>
  </body>
  </html>


②. 插值表达式


  • ①. 数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值,Mustache 标签将会被替代为对应数据对象上属性的值。无论何时,绑定的数据对象上属性发生了改变,插值处的内容都会更新


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


  <font color="blue">{{ number + 1 }} 
  <font color="blue">{{ ok ? 'YES' : 'NO' }}
  <font color="blue">{{ reversedMessage() }}插值表达式可以定义方法
    {{scope.row.TASKSTATUS == '0' ?"未审批" : scope.row.TASKSTATUS=='1' ? "已通过" : '已驳回'}}


③. 如下不会生效


  <!-- 这是语句,不是表达式 -->
  {{ var a = 1 }}
  <!-- 流控制也不会生效,请使用三元表达式 --> 
  {{ if (ok) { return message } }}


③. 指令(格式:以v-开始(比如:v-cloak))


  • ①. 前言:出现闪烁问题:


   <div id="app">
        <!-- 在网速很慢的情况下,会先出现{{msg}},后出现测试-->
        {{msg}}
    </div>
    <script src="../js/vue.js"></script>
    <script>
    var vm=new Vue({
            el:'#app',
            data:{   
                msg:"测试"
            }
    });
    </script>


②. 关于指令详解:


微信图片_20220106150811.png


③. 代码展示:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        [v-cloak]{
            display:none;
        }
    </style>
</head>
<body>
    <div id="app">
        <div v-cloak>{{msg}}</div>
        <div v-text="msg"></div>
        <div v-html="msg1"></div>
        <div v-pre>{{msg1}}</div>
    </div>
    <script src="../js/vue.js"></script>
    <script>
    var vm=new Vue({
            el:'#app',//元素的挂载位置(值可以是css选择器或者DOM元素)
            //el:appel
            data:{    //模型数据:值是一个对象
              msg:'hello xiaozhi',
              msg1:'<h1>v-html</h1>'
            }
    });
    </script>
</body>
</html>



相关文章
|
2月前
|
JavaScript
Vue 指令速查表
【10月更文挑战第12天】Vue 指令速查表
|
2月前
|
JavaScript 开发者
vue指令的开发看这篇文章就够了!超详细,赶快收藏!
【10月更文挑战第8天】vue指令的开发看这篇文章就够了!超详细,赶快收藏!
vue指令的开发看这篇文章就够了!超详细,赶快收藏!
|
2月前
|
JavaScript 前端开发
VUE学习三:双向绑定指令(v-mode)、组件化开发(全局组件/局部组卷/组件通信)、组件化高级(slot插槽使用)
这篇文章是关于Vue.js框架中的v-model指令和组件化开发的详细教程,涵盖了从基础使用到高级功能的多个方面。
34 1
|
2月前
|
JavaScript 前端开发 开发者
VUE学习一:初识VUE、指令、动态绑定、计算属性
这篇文章主要介绍了Vue.js的基础知识,包括初识Vue、指令如v-for、v-on的使用、动态属性绑定(v-bind)、计算属性等概念与实践示例。
65 1
|
3月前
|
JavaScript 前端开发
Vue学习笔记8:解决Vue学习笔记7中用v-for指令渲染列表遇到两个问题
Vue学习笔记8:解决Vue学习笔记7中用v-for指令渲染列表遇到两个问题
|
3月前
|
JavaScript 前端开发 API
Vue学习笔记7:使用v-for指令渲染列表
Vue学习笔记7:使用v-for指令渲染列表
|
2月前
|
人工智能 JavaScript 程序员
vue中内置指令v-model的作用和常见使用方法介绍以及在自定义组件上支持
vue中内置指令v-model的作用和常见使用方法介绍以及在自定义组件上支持
211 0
|
2月前
|
JavaScript 算法 前端开发
在Vue开发中v-if指令和v-show指令的使用介绍,v-if和v-for的优先级以及使用注意事项的介绍
在Vue开发中v-if指令和v-show指令的使用介绍,v-if和v-for的优先级以及使用注意事项的介绍
23 0
|
4月前
|
JavaScript
基于Vue2或Vue3实现任意上下左右拖拽悬浮的元素,且配置为自定义的全局指令
这篇文章介绍了如何在Vue 2或Vue 3项目中实现一个自定义的全局指令`v-dragSwitch`,用于创建可以任意方向拖拽并悬浮的元素,同时包含边界处理的逻辑。
1268 2
基于Vue2或Vue3实现任意上下左右拖拽悬浮的元素,且配置为自定义的全局指令
|
4月前
|
JavaScript 前端开发 安全
svg图片hover变色,居然只用一个vue指令就可以搞定!千万别在写两个控制显影了!
【8月更文挑战第22天】svg图片hover变色,居然只用一个vue指令就可以搞定!千万别在写两个控制显影了!
399 3