分享一下Vue基本語法-有解無憂

一、vue的介紹

1.想要了解vue,首先就要vue是什么?

簡單來說vue是一個漸進式的框架,那漸進式框架又是什么呢?

漸進式就是可以將Vue作為應用的一部分嵌入其中，帶來更豐富的互動體驗，

2.Vue有什么特點?

解耦視圖和資料、可復用的組件、前端路由技術、狀態管理、虛擬DOM等

3.學習 vue的前置條件是什么呢？

零基礎學習vue其實并不需要具備類似angular、react或jquery的經驗，

但必須具備一定的HTML、CSS、JavaScript基礎，

二、vue的安裝教程

1.了解完vue的基本概念，現在可以安裝 vue，其實安裝vue的方法有很多，在這里我只介紹2個安裝方法：

方式一：cdn引入

//開發環境版本
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

//生產環境版本
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

方式二：下載

// 開發環境 https://vuejs.org/js/vue.js
// 生產環境 https://vuejs.org/js/vue.min.js

2.vue的以一個程式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
         <!-- mustache語法 又叫胡子語法、插值語法 -->
        <p>{{hao}}</p>
        {{msg}}
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    // 實體化
    new Vue({
        //將vue掛載在當前元素下
        el:'#app',
        //存放所需的資料
        data:{
            hao:'你好世界',
            msg:'hello word'
        }
    })
</script>
</html>

3.分享一些vue的模板語法

<!DOCTYPE html>
<html lang="en">
<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>
  <style>
    [v-cloak] {
      display: none;
    }
  </style>
</head>
<body>
  <div id="app">
<!-- v-html不僅可以渲染資料，而且可以決議標簽 -->
    <div v-html="htmlTxt"></div>
<!-- v-text和{{}}運算式渲染資料，不決議標簽 -->
    <div v-text="textTxt"></div>
<!-- 讓胡子語法失效,顯示應該有的{{}} 內容 -->
    <div v-pre>{{123}}</div>
<!-- 用于在資料渲染之前將標簽隱藏,這樣用戶就看不見胡子語法 -->
    <div v-cloak>hello {{textTxt}}</div>
  </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  let vm = new Vue({
    el: '#app',
    data: {
      htmlTxt: '<p><strong>我是html</strong></p>',
      textTxt: 'Vue'
    }
  })
</script>
</html>

<!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></title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: #f00;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="box" v-show='flag'>盒子1</div>
        <div class="box" v-if='ifFlag'>盒子2</div>
    </div>
</body>

</html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            falg: false,
            ifFlag: true
        }
    })
    //v-show 與 v-if 都具有操作顯示隱藏的功能，但兩者有什么區別呢？
    //1.v-show 控制的是css的display屬性
    //2.v-if 通過創建和銷毀dom元素實作
    //3.從性能出發,v-show性能更改,v-if會造成性能浪費

    //什么時候使用 v-if 與 v-show?
    //1.當需要頻繁切換一個元素的顯示隱藏時,使用v-show
    //2.當一次性渲染元素并再也不需要修改時,兩者都可
</script>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/308836.html

標籤：其他

上一篇：Express 中間件

下一篇：ajax介面檔案url路徑簡寫方式