vue入门学习（1）

最新推荐文章于 2024-08-15 18:19:19 发布

m0小麦麦

最新推荐文章于 2024-08-15 18:19:19 发布

阅读量443

点赞数 1

分类专栏： java基础文章标签：前端 vue.js

本文链接：https://blog.csdn.net/m0_70955866/article/details/127586171

版权

本文是Vue.js入门学习的第一部分，介绍了插值表达式、v-bind动态绑定属性、v-text与v-html的区别、v-if与v-show的条件渲染以及它们之间的区别。通过实例展示了如何在Vue中设置标签内容、动态绑定属性，并探讨了何时使用v-if和v-show。

摘要由CSDN通过智能技术生成

插值表达式

{ {属性名/方法名()/表达式}} 把结果渲染在DOM元素中文本

注意: 不能使用if-else结构,可以使用三目运算表达式? 值1:值2

例如：

 <div id="app">
    <h2>{
 {message}}</h2>    //插入属性
    <h2>{
 {1+2}}</h2>        //插入表达式
    <h2>{
 {fun()}}</h2>      //插入方法
    <h2>{
 {flag?1:0}}</h2>   //插入三目运算符
    <!-- <h2>{
 {if(flag){return 1}else{return 0}}}</h2> -->//报错
  </div>
  
  
  <script>
    // 1.创建app
    const app = Vue.createApp({
      data: function() {
        return {
          message: "Hello Vue",  //定义属性并赋值
          flag:true
        }
      },
      methods:{
        fun(){                  //定义方法，并返回值
            return "你好";
        }
      }
    })

    // 2.挂载app
    app.mount("#app")
  </script>

运行结果：

v-bind 动态绑定一个或者多个属性

在html标签原生属性前写v-bind, 可让原生标签调用data中的属性

例如：<h2 v-bind:class="data中的属性"></h2>

v-bind可简写为：

例如：<h2 :class="data中的属性"></h2>

<div id="app">
    <!-- <h2 v-bind:class="styleA">{
 {message}}</h2> -->
    <!--简写-->
    <h2 :class="styleA">{
 {message}}</h2>
 
    <!-- <div v-bind:id="att.id" v-bind:class="att.class">我是div</div> -->
    <div v-bind="att">我是div</div>
  </div>
  <script>
    // 1.创建app
    const app = Vue.createApp({
      // data: option api
      data: function() {
        return {
          message: "Hello Vue",
          styleA:'green',
          att:{
            id:"box",
            class:"red&