1、Vue基礎語法

時間 2020-05-06

標籤 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>
    <script src="https://vuejs.org/js/vue.min.js"></script>
</head>
<body>

一Vue的基礎語法javascript

1: el可使用id選擇器，el="#app"

<div id="app">
    {{msg}}
</div>
<script type="text/javascript">
 var vm=new Vue{(
     el:"#app",
     data:{
          msg:"Hello World"
         }
　　)};
</script>

</body>
</html>

　　在ie瀏覽器上顯示的效果如圖所示html

2：el可使用class類選擇器,el=".app"

<div class="app">
    {{msg}}
</div>
<script type="text/javascript">
 var vm=new Vue{(
     el:".app",
     data:{
          msg:"Hello World"
         }
　　)};
</script>

</body>
</html>

3el:可使用dom對象el=document.getElementById("app")

<script type='text/javascript'>
    var vm=new Vue({
        el: document.getElementById("app"),
        data:{
            msg:"Hello World"
        }
    });
</script>

</body>
</html>

在ie瀏覽器中顯示如上圖，可是el不能使用html或body


2、插值表達式基本用法

<div id='app'>
        <!-- 差值 **表達式** -->
        <p>string  ——  {{string}}</p>
        <p>count == 100  ——  {{count == 100}}</p>
        <p>count < 100  ——  {{count < 100}}</p>
        <p>count+10  ——  {{count+10}}</p>
        <p>string.split("|")  ——  {{string.split("|")}}</p>
        <p>count < 100?"小於":"大於"  ——  {{count < 100?"小於":"大於"}}</p>
        <p>{{fun2}}</p>
        <p>{{fun2()}}</p>
    </div>
    <script type='text/javascript'>
    //MVVM：M->model  V->view 即 html代碼  VM->viewModel 負責 數據即Model與視圖即View之間的調度
    var vm =  new Vue({
           el:"#app",
           data:{
               string:"Hello word | 你好世界",
               count:100,
               array:[1,2,3,4,5],
               object:{
                   id:1,
                   name:"小李"
                }
           },//網頁初始化構造器
           mounted() {
               this.fun1();
           },//方法體
           methods: {//ES5函數寫法
               fun1:function(){
                  console.log(this.string) 
               },
               //ES6的函數簡寫形式
               fun2(){
                return "你好世界";
               }
           },
       });
    </script>

</body>
</html>

　在ie瀏覽器中顯示的效果以下圖所示vue

3、vue指令：凡是v-開頭的都叫vue指令java

v-text和v-html類比innerText和innerHTML相比較數組

插值表達式：1是插入時的數據渲染2還沒有渲染完成時會出現醜醜的大括號瀏覽器

v-text，v-html：1是總體是的數據替換2還沒有渲染完成時不會出現東西（渲染標籤中內容事先除外）app

注意：非必要是儘可能不要使用或者禁止使用v-html，由於會有xss跨站腳本攻擊dom

 <div id="app">
        <p>{{string}}--舒大強你好麼</p>
        <p v-text="string">舒大強你好麼</p>
        <p v-html="string">舒大強你好麼</p>
    </div>
    <script type="text/javascript">
        setTimeout(function(){
            var vm=new Vue({
            el:"#app",
            data:{
                string:"<b>Hello World</b>| 你好世界"
            }
        });},5000);        
    </script>

</body>
</html>

　　在ie瀏覽器中顯示以下圖一，圖二有5秒鐘的變化xss

4、Vue指令條件選擇ide

v-if :更大的開銷，適用於不平凡切換顯示狀態，而且初始渲染時沒必要渲染，多重判斷時適合使用之v-if。

v-show ：開銷較小，適用於平凡切換顯示狀態

<div id="app">
        <p v-if="isShow">v-if————————{{string}}</p>
        <p v-else>v-else————————{{string}}</p>
        <p v-show="isShow">v-show————————{{string}}</p>
    </div>
    <script>
        var vm =  new Vue({ el: "#app", data:{ string:"<b>Hello word</b> | 你好世界", isShow:false } });

</body>
</html>

在ie瀏覽器上顯示效果如圖

5、Vue事件

5.1v-on：監聽事件能夠省略成@

爲了讓用戶和你的應用進行交互，咱們能夠用 v-on 指令添加一個事件監聽器，經過它調用在 Vue 實例中定義的方法：

<div id="app">
        {{string}}
       <button v-on:click="clickMe('Hello ice')">點擊我</button>
        <!-- <button @click="clickMe('other ice')">點擊我</button> -->
        <input type="text" v-bind:value="string">
</div>
<script>
        var vm =  new Vue({
           el: "#app",
           data:{
               string:"Hello word"
           },
           methods: {
            clickMe:function(param){
                this.string = param;
            }
           }
       });
 </scrip>

</body>
</html>

　在瀏覽器中顯示效果如圖1、圖2、

5.2Vue的click事件只觸發一次，須要在click後加once指令如：@click.once="#"

<div id="app">
        {{string}}
        <!-- click.once 只會觸發一次 -->
        <button @click.once="clickOnce">只觸發一次</button>
</div>
    <script>
        var vm =  new Vue({
           el:"#app",
           data:{
               string:"Hello word"
           }
           methods: {
            clickOnce(){
                alert("我被觸發了");
            }
           }
       });
    </script>
</body>
</htnl>

　         在ie瀏覽器上顯示效果如圖一，圖二

5.3Vue的click.privent能夠阻止默認事件

<div id="app">
{{string}}
 <a href="http://www.baidu.com" @click.prevent="stopjump">百度</a>
</div>
    <script>
        var vm =  new Vue({
           el: "#app",
           data:{
               string:"Hello word"  
           }
           methods: {   
            stopjump(){
                alert("我被觸發了");
            }
           }
       });
    </script>

</body>
</html>

　　在ie瀏覽器上顯示效果如圖一，圖二

5.4Vue的click.stop 能夠阻止冒泡事件

<div id="app">
        {{string}}
           <div @click="alert(1)">
            <div>
                <div @click.stop="alert(3)">
                    我是div
                </div>
            </div>
        </div>
</div>
<script>
  var vm=new Vue（{
              el:"#app",
              data:{
                 msg:"Hello word"
              }
     }）;
</scriipt>

</body>
</html>

在ie瀏覽器中現實的效果如圖所示：說明：由於在click事件後使用了stop事件因此在ie瀏覽器上用鼠標點擊」我是div「只會彈出來對話框3阻止了對話框1.

5.5Vue文本框在文本框中輸入字符串後會激發v-on:change事件

<div id="app">
        {{string}}
        <input type="text" @change="change"> 
        <input type="text" v-bind:value="string" @input="inputChange($event)">
    </div>
    <script>
        var vm =  new Vue({
           el: document.getElementById("app"),
           data:{
               string:"Hello word"
          },
           methods: {
            change(){
                alert("數據改變了");
            },
            inputChange(e){
               this.string = e.target.value;
            }
           }
       });
    </script>
</body>
</html>

　在ie瀏覽器上顯示的效果如圖所示一，二，三所示

5.6Vue中的array數組和for循環：array是須要渲染的對象，item是每次接收迭代的對象的別名

 1    <div id="app">
 2         <ul>
 3             <li v-for="item in array">{{item}}</li>
 4         </ul>
 5     </div>
 6     <script>
 7         var vm = new Vue({
 8             el: "#app",
 9             data: {
10                 array: [1, 2, 3, 4, 5,]
11             }
12         });
13     </script>

View Code

</body>
</html>

　　在ie瀏覽器上顯示的效果如圖所示

5.7Vue中的數組對象arrayObject，obj是對象，i是索引，objectArray是數組對象

 1   <div id="app">
 2         <ul>
 3           <li v-for="(obj,i) in objectArray">{{obj.id}}————{{obj.name}}————{{i}}</li>
 4   </ul>
 5  </div>
 6     <script>
 7         var vm = new Vue({
 8             el: "#app",
 9             data: {
10                 objectArray: [{
11                     id: 1,
12                     name: "張山"
13                 },
14                 {
15                     id: 2,
16                     name: "李四"
17                }]
18             }
19         });
20     </script>

View Code

</body>
</html>

　　在ie瀏覽器中顯示的結果如圖所示

5.8Vue中若是是迭代對象，則順序不一樣第一個參數是對象的屬性value，第二個參數是屬性的key，第三個參數是索引

 1  <div id="app">
 2         <ul>
 3             <li v-for="(v,k,i) in object">{{k}}——{{v}}——{{i}}</li>
 4             <li v-for="num in 10">{{num}}——指定數據</li>
 5         </ul>
 6     </div>
 7 <script>
 8         var vm = new Vue({
 9             el: "#app",
10             data: {
11                 object: {
12                     id: 1,
13                     name: "張山"
14                 }
15             },
16         });
17     </script>