Vue初学

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>

虽然一天学的不多，但日积跬步，足以行千里，戒骄戒躁，慢慢来呀！