vue入門一

時間 2019-11-17

標籤 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></title>
    <style type="text/css">
        .box{
            background-color: red
/*            height: 200px
            width: 200px*/
        }

        .box2{
            background-color: green;
        }

    </style>>
</head>
<body>
	<div id="app">
        <hr>
        <h2>實例化對象測試</h2>
		<h3>{{title}}</h3>
 
        <h3>{{1+1}}</h3>
        <h3>{{3>2?"真的":"假的"}}</h3>
        <h3>hahaahahah</h3>


        <!-- <h3>{{123}}</h3> -->
        <!-- 這個能夠正常顯示，由於數字也是一個對象 -->


        <!-- <h3>{{a}}</h3> -->
        <!-- 這個會報錯，會找a這個變量，找不到就會報錯 -->

        <hr>
        <h2>指令系統測試</h2>

        <h3 v-if = "show">顯示隱藏測試</h3>

        <input v-on:click = "clickhandler" type="button" value="按鈕">


        <h3 v-show = "isshow">v-show的測試</h3>


        <h3 v-show = "isshow" v-bind:title="title">v-title的測試</h3>
        <!-- 綁定一個title屬性，鼠標懸浮上會顯示title的值，能夠綁定任何屬性 -->


        <!-- v-bind寫起來有點繁瑣，能夠直接用冒號代替 ： -->
        <!-- v-on寫起來有點繁瑣，能夠直接用@符號代替v-on，其餘和以前是同樣的 -->

       

        <div class="box" v-bind:class='{box2:isGreen}'>綁定class屬性測試</div>
        <input type="button" v-on:click="changeColour" value="切換按鈕">


        <button v-on:click="num+=1">加{{num}}</button>

        <img v-bind:src="img" v-bind:alt="time">


        <div v-if = "Math.random() > 0.5">
            數字大於1
        </div>
        <div v-else>
            數字小於1
        </div>


        <div v-if = "type === '打雷'">
            打雷
        </div>
        <div v-else-if = "type === '下雨'">
            下雨
        </div>
        <div v-else>
            雷陣雨
        </div>

	</div>
    <script src="vue.js" type="text/javascript"></script>
    <script>



        // 1.建立vue實例化對象,一個vue實例只能綁定一塊地，綁定的這塊地就能夠使用實例化中的data數據，採用{{}}的方式使用data中的數據
      

        var app = new Vue({
            el:"#app",
            // el的屬性是這個vue的對象綁定的標籤的id
            
            data:{
            // 全部的數據都放在數據屬性中,必須是data,第一個屬性是el，第二個屬性是data
               title:'土豆' ,
               show:true,
               type:"下雨",
               isshow:true,
               title:"title測試",
               img:'./timg.jpg',
               time:`頁面加載於${new Date().toLocaleString()}`,
               isGreen:true,
               num:1

            },
            methods:{
                clickhandler(){
                    // 這裏這個this就是當前實例化的對象

                    this.$data.show = !this.show;
                },
                changeColour(){
                    alert(123);
                    this.isGreen = !this.isGreen;

                }
            }
        })

        console.log(app);
        // 打印app這個對象

        console.log(app.$el);
        // 打印app這個對象的el屬性

        console.log(app.$data.title)

        console.log(app.title)

        // 上面這兩種方式效果同樣，咱們打印app這個對象，能夠看到這個對象直接就有一個title屬性




        // 二、vue的指令系統


    </script>
</body>
</html>

1. vue入門（一）
2. Vue入門（一）
3. vue入門(一)
4. Vue入門學習（一）
5. Vue初級入門(一)
6. Vue快速入門（一）
7. vue入門（一）----工程vue_sell
8. Vue框架入門學習(一)——Vue 1.0
9. 初學Vue（一） -- Vue簡單入門
10. Vue入坑——vue-router（vue路由）入門
更多相關文章...
• Memcached入門教程 - NoSQL教程
• Neo4j數據庫入門教程 - NoSQL教程
• YAML 入門教程
• Java Agent入門實戰（一）-Instrumentation介紹與使用

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。