Vue筆記

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

    Vue.component('my-component', {
        template: '<p>這是自定義組件!</p>'
    });

    new Vue({
        el:'#app', 
        data:{      
            message:'Hello,vue!', 
            modeltest:'雙向綁定測試',
            url:'https://www.google.com.tw',
            items: [
                { id: 1, text: '項目 1',price:7000, },
                { id: 2, text: '項目 2',price:8000,},
                { id: 3, text: '項目 3',price:9000, }
            ],
        },
        methods:{
            changeMessage() {
                this.message = '你好，Vue！';
            },
        },
        computed:{
            final_price(){
                return this.items.price*0.9;
            },
        },
    });

    <p v-bind:title="message">將滑鼠放在我上面看見message定義的訊息</p>
    <p :title="message">將滑鼠放在我上面看見message定義的訊息</p>

data: {
        message: 'Hello, Vue!', // 定義原始顯示數據
}

    <input v-model="modeltest" placeholder="輸入訊息">
    <p>輸入的訊息：{{ modeltest }}</p>

data: {
        modeltest:'雙向綁定',
},

    <ul v-for="item in items" :key="item.id">
        <li>項目：{{ item.text }}</li>
        <li>價錢：{{ item.price }}</li>
        // 使用{{item.text}}可以取的item內的數值
    </ul>

data: {
    items: [
        { id: 1, text: '項目 1',price:7000, },
        { id: 2, text: '項目 2',price:8000,},
        { id: 3, text: '項目 3',price:9000, }
    ],
},

    <p v-if="isLoggedIn">歡迎回來Vue！</p>
    <p v-else>請點擊登入。</p>
    <button @click="toggleLoginStatus">登入</button>

    data: {
        isLoggedIn: false,
    },
    

    methods:{
        toggleLoginStatus() {
            this.isLoggedIn = !this.isLoggedIn;
        }
    }
    

  <ul>
    <li v-for="item in items" v-if="item.isVisible">{{ item.name }}</li>
  </ul>
  <button @click="toggleitem">顯示</button>

    data: {
        items: [
            { id: 1, text: '項目 1',price:7000,name:'阿哈哈1',isVisible: true},
            { id: 2, text: '項目 2',price:8000,name:'阿哈哈2',isVisible: true},
            { id: 3, text: '項目 3',price:9000,name:'阿哈哈3',isVisible: true}
          ],    
    },
    

    methods:{
        toggleitem(){
            this.items.forEach(item => {
                item.isVisible = !item.isVisible;
            });
    }
    

    <button @click="changeMessage">v-on事件綁定的簡寫</button>
    <button v-on:click="changeMessage">v-on事件綁定的一般寫法</button>

    data: {
      message:'Hello,Vue!',
    },
    

    methods:{
        changeMessage() {
            this.message = '你好，Vue！'; // 改變p顯示的數據
        },
    }