vue快速入門基礎知識教程

<!-- 準備好一個容器 -->
<div id="demo">
	<h1>Hello，{{name.toUpperCase()}}，{{address}}</h1>
</div>

<script type="text/javascript" >
	Vue.config.productionTip = false //阻止 vue 在啟動時生成生產提示。

	//創建Vue實例
	new Vue({
		el:'#demo', //el用於指定當前Vue實例為哪個容器服務，值通常為css選擇器字符串。
		data:{ //data中用於存儲數據，數據供el所指定的容器去使用，值我們暫時先寫成一個對象。
			name:'hello,world',
			address:'北京'
		}
	});

</script>

<div id="root">
	<h1>插值語法</h1>
	<h3>你好，{{name}}</h3>
	<hr/>
	<h1>指令語法</h1>
    <!-- 這裡是展示被Vue指令綁定的屬性，引號內寫的是js表達式 -->
	<a :href="school.url.toUpperCase()" rel="external nofollow"  x="hello">點我去{{school.name}}學習1</a>
	<a :href="school.url" rel="external nofollow"  x="hello">點我去{{school.name}}學習2</a>
</div>

<script>
    new Vue({
		el:'#root',
		data:{
			name:'jack',
			school:{
				name:'百度',
				url:'http://www.baidu.com',
			}
        }
	})
</script>

<div id="root">
	<!-- 普通寫法 單向數據綁定 -->
    單向數據綁定：<input type="text" v-bind:value="name"><br/>
    雙向數據綁定：<input type="text" v-model:value="name"><br/>
    
    <!-- 簡寫 v-model:value 可以簡寫為 v-model，因為v-model默認收集的就是value值-->
    單向數據綁定：<input type="text" :value="name"><br/>
    雙向數據綁定：<input type="text" v-model="name"><br/>
</div>

<script>
    new Vue({
		el:'#root',
		data:{
			name:'jack',
        }
	})
</script>

<!-- 準備好一個容器-->
<div id="root">
    <h2>歡迎來到{{name}}學習</h2>
    <!-- <button v-on:click="showInfo">點我提示信息</button> -->
    <button @click="showInfo1">點我提示信息1（不傳參）</button>
    <!-- 主動傳事件本身 -->
    <button @click="showInfo2($event,66)">點我提示信息2（傳參）</button>
</div>

<script>
	const vm = new Vue({
        el:'#root',
        data:{
            name:'vue',
        },
        methods:{
            // 如果vue模板沒有寫event，會自動傳 event 給函數
            showInfo1(event){
                // console.log(event.target.innerText)
                // console.log(this) //此處的this是vm
                alert('同學你好！')
            },
            showInfo2(event,number){
                console.log(event,number)
                // console.log(event.target.innerText)
                // console.log(this) //此處的this是vm
                alert('同學你好！！')
            }
        }
	});
</script>

<!-- 準備好一個容器-->
<div id="root">
    <h2>歡迎來到{{name}}學習</h2>
    <!-- 阻止默認事件（常用） -->
	<a href="http://www.baidu.com" rel="external nofollow"  @click.prevent="showInfo">點我提示信息</a>
    <!-- 阻止事件冒泡（常用） -->
    <div class="demo1" @click="showInfo">
        <button @click.stop="showInfo">點我提示信息</button>
        <!-- 修飾符可以連續寫 -->
        <!-- <a href="http://www.atguigu.com" rel="external nofollow"  @click.prevent.stop="showInfo">點我提示信息</a> -->
    </div>
    <!-- 事件隻觸發一次（常用） -->
    <button @click.once="showInfo">點我提示信息</button>
</div>

<!-- 準備好一個容器-->
<div id="root">
    <h2>歡迎來到{{name}}學習</h2>
    <input type="text" placeholder="按下回車提示輸入" @keydown.enter="showInfo">
</div>

<script>
    new Vue({
        el:'#root',
        data:{
            name:'浙江理工大學'
        },
        methods: {
            showInfo(e){
                // console.log(e.key,e.keyCode)
                console.log(e.target.value)
            }
        },
    })
</script>

<!-- 準備好一個容器-->
<div id="root">
    <!-- 使用v-if做條件渲染 -->
    <h2 v-if="false">歡迎來到{{name}}</h2>
    <h2 v-if="1 === 1">歡迎來到{{name}}</h2>
    
    
    <!-- v-else和v-else-if -->
    <div v-if="n === 1">Angular</div>
    <div v-else-if="n === 2">React</div>
    <div v-else-if="n === 3">Vue</div>
    <div v-else>哈哈</div>
    
    
    <!-- v-if與template的配合使用 -->
    <!-- 就不需要寫好多個判斷，寫一個就行 -->
    <!-- 這裡的思想就像事件代理的使用 -->
    <template v-if="n === 1">
        <h2>你好</h2>
        <h2>尚矽谷</h2>
        <h2>北京</h2>
    </template>
</div>

<script>
	const vm = new Vue({
        el:'#root',
        data:{
            styleArr:[
                {
                    fontSize: '40px',
                    color:'blue',
                },
                {
                    backgroundColor:'gray'
                }
            ]
        }
    })
</script>

<!-- 準備好一個容器-->
<div id="root">
    <!-- 使用v-show做條件渲染 -->
    <h2 v-show="false">歡迎來到{{name}}</h2>
    <h2 v-show="1 === 1">歡迎來到{{name}}</h2>
</div>

<div id="root">
    <!-- 遍歷數組 -->
    <h2>人員列表（遍歷數組）</h2>
    <ul>
        <li v-for="(p,index) of persons" :key="index">
            {{p.name}}-{{p.age}}
        </li>
    </ul>

    <!-- 遍歷對象 -->
    <h2>汽車信息（遍歷對象）</h2>
    <ul>
        <li v-for="(value,k) of car" :key="k">
            {{k}}-{{value}}
        </li>
    </ul>

    <!-- 遍歷字符串 -->
    <h2>測試遍歷字符串（用得少）</h2>
    <ul>
        <li v-for="(char,index) of str" :key="index">
            {{char}}-{{index}}
        </li>
    </ul>

    <!-- 遍歷指定次數 -->
    <h2>測試遍歷指定次數（用得少）</h2>
    <ul>
        <li v-for="(number,index) of 5" :key="index">
            {{index}}-{{number}}
        </li>
    </ul>
</div>

<script>
	const vm = new Vue({
        el:'#root',
        data: {
			persons: [
				{ id: '001', name: '張三', age: 18 },
				{ id: '002', name: '李四', age: 19 },
				{ id: '003', name: '王五', age: 20 }
			],
			car: {
				name: '奧迪A8',
				price: '70萬',
				color: '黑色'
			},
			str: 'hello'
		}
    })
</script>