Vue初識

其實我現在很迷，對vue並沒有太過於清楚的認識，只是出於想要學習前端而開始觀看學習，但觀看了官方的介紹視訊後發現vue還是很有意思的，能夠將介面元素的變化及時響應到介面上，通過改變js中定義的vue引數即可完成操作，希望我能一直學下去！

Vue開始

目前我是通過使用引用連結進行使用的Vue的，還是比較簡單的階段，看了看初學的文件，隨便寫了寫，不需要急於求成哈哈哈，Vue引用的連結在下面啦。

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

簡單的Vue操作包括了以下內容：

1. v-show: 可以通過Vue中的引數的true/false來控制元素是否顯示，而該元素會直接在初始化時進行載入，只用通過改變對應引數的狀態就可決定該元素是否顯示；
2. v-if:這個和v-show相似而又不相似，區別在於判斷條件為false的元素在初始化時不會進行載入，所以在後期更改狀態進行渲染時會使得成本比較高，如果需要多次更改狀態的話可以使用v-show；
3. v-for: 類似於for迴圈，可以在列表中顯示出在vue中定義的陣列，具體使用方法如下：

	<div id="app">
		<ol>
	        <li v-for="todo in todos">
	            {{todo.text}}
	        </li>
	    </ol>
    </div>

<script>
	var app = new Vue({
	        el: '#app',
	        data: {
	            message: "我真的好喜歡扶熠呀！",
	            type:"B",
	            ok: true,
	            todos:[
	                {text:'學習JavaScript'},
	                {text:'學習Vue'},
	                {text:'整個好的專案'}
	            ]
	        }
	    });
</script>

4. v-model: 可以反向繫結vue，也就是可以實現通過更改文字框內容來達到更改vue引數的效果，然後顯示於介面元素當中：

<div id="app2">
    <p>{{message}}</p>
    <label>
        <input v-model="message">
    </label>
</div>

<script>
	var app2=new Vue({
	        el:"#app2",
	        data:{
	            message:'我愛扶熠!'
	        },
	        methods:{
	
	        }
	    })
</script>

5. v-on: 可以動態繫結操作進行更改資訊，比如繫結button的click事件，進行更改文字內容：

<div id="app1">
    <h1>{{message}}</h1>
    <button v-on:click="reverseMessage">反轉訊息</button>
</div>

<script>
	var app1= new Vue({
        el:'#app1',
        data:{
            message: '我真的喜歡扶熠'
        },
        methods: {
            reverseMessage:function () {
                this.message = this.message.split('').reverse().join('')
            }
        }
    });
</script>

雖然一天學的不多，但日積跬步，足以行千里，戒驕戒躁，慢慢來呀！