Vue簡單語法實例

時間 2020-07-07

標籤 vue 簡單語法實例简体版

原文原文鏈接

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 測試實例</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script src="https://cdn.staticfile.org/vue-router/2.7.0/vue-router.min.js"></script>
</head>
<body>
    <div id="app">
        <!--測試指令-->
        <p v-if="seen">測試v-if</p>
        <p v-else>測試v-else</p>
        <p v-show="show">測試v-show</p>
        <ul>
            <li v-for="fors in test_for">{{fors.number}},{{fors.name}}</li>
        </ul>
        <p v-on:click="myclick">點擊我</p>
        <p @click="myclick">快捷點擊方式</p>

        <!--複選框綁定，測試v-model-->
        <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
        <label for="runoob">Runoob</label>
        <input type="checkbox" id="google" value="Google" v-model="checkedNames">
        <label for="google">Google</label>
        <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
        <label for="taobao">taobao</label>
        <h3>複選框選擇內容： {{checkedNames}}</h3>
        
        <!--1.1調用組件-->
        <div id = "reallytemp">
            <temp1></temp1>
        </div>

        <!--1.2組件間傳值：一、父組件傳值給子組件，二、子組件傳值給父組件-->
        <!--1.2.一、父組件傳值給子組件-->
        <div>
            <temp2 :value1='fathervalue'></temp2>
        </div>
        <!--1.2.一、父組件傳值給子組件-->
        <div>
            <temp3 v-on:send='getData'></temp3>
        </div>

        <!--1.2路由的使用-->
        <div>
            <router-link to='/login'>登陸</router-link>
            <!--路由傳值-->
            <router-link to='/register/liuhui'>註冊</router-link>
            <!-- 路由匹配到的組件將渲染在這裏 -->
            <router-view></router-view>
        </div>
    </div>

    <!--1.1測試組件，定義組件-->
    <template id="temp">
        <div>
            <h3 v-on:click="login">測試組件 {{msg}}</h3>
            <a href="" >帳號</a>
            <a href="">密碼</a>
        </div>
    </template>
    <!--1.2.1子組件，定義組件-->
    <template id="fathToson">
        <div>
            父組件傳值給子組件，顯示結果：{{value1}}
        </div>
    </template>
    <!--1.2.2子組件，定義組件-->
    <template id="sonTofath">
        <div>
            <h3 @click="sendData">子組件點擊發送數據給父組件</h3>
        </div>
    </template>
</body>

    
<script type="text/javascript">
    Vue.component('temp1',{            //temp1爲後續調用模板的標籤名
        template:'#temp',             //對應模板的id
        data:function(){             //此處data的顯示和以前的方式不一樣，採用函數返回的方式
            return {
                msg:'信息顯示'
            }
        },
        methods:{
            login:function(){
                console.log("點擊")
            } 
        }
    })
    //1.2.1
    Vue.component('temp2',{
        template:'#fathToson',
        //接受數據
        props:{
            value1:String           //若是傳入值爲數字，則爲number
        } 
    })
    //1.2.2
    Vue.component('temp3',{
        template:'#sonTofath',
        methods:{
            sendData(){
                this.$emit('send',123)        //第一個參數對應父組件中v-on綁定的函數名稱，第二個參數爲發送內容
            }
        }
    })
    //路由的使用
    //一、定義根組件
    var rootapp = Vue.extend()
    //二、定義註冊和登陸組件
    var login = Vue.extend({
        template : '<h3>您已進入登陸頁面</h3>'
    })
    var register = Vue.extend({
        template : '<h3>您已進入註冊頁面,註冊明爲{{receivename}}</h3>',
        //路由傳值設定
        data :function(){
            return {
                receivename : ''
            }
        },
        created:function(){
            this.receivename = this.$route.params.uname
        }
    })
    
    //三、定義路由而且註冊路由規則
    var vueRoute = new VueRouter({
        routes : [
            {path:'/',redirect:'/login'},
            {path:'/login',component:login},
            {path:'/register/:uname',component:register}
        ]
    })
    //四、使用路由,加入route，見下面

    new Vue({
    el: '#app',
    data: {
        seen: false,
        show:false,
        test_for:[
            {number:1,name:"qq"},
            {number:2,name:"qqq"},
            {number:3,name:"qqqq"},
            {number:4,name:"qqqqq"},
        ],
        checkedNames:[],
        fathervalue:'父組件的值'
    },
    methods:{
        myclick:function(){
            console.log("我被點擊了")
        },
        getData:function(tag){
            console.log(tag)
        }
    },
    router : vueRoute
    })
    
   
</script>

</html>