vue基础学习（1）hello world

序言

江湖上传说最难得的代码就是hello world 学习任何一门语言 只要你能实现hello world，你就成功了一大步，QAQ 不管你信不信 我是信了-。-
因此我们先来个 hello world

1. 首先引入vue 不管你是本地下载 CDN 还是npm i vue -S 都无所谓。
   然后我们要工厂化实例一个VUE对象，其中el指向的页面的节点元素，data指定的是数据，{{ title }}两个大括号的语法方式叫“插值表达式”；
   没有什么是一个梨子解决不了的

<div id="app">
            <p>
                <!--{{ }}两个大括号的语法方式叫“插值表达式”；-->
                {{ title }}
            </p>
        </div>
        <script type="text/javascript" src="https://cdn.bootcss.com/vue/2.6.9/vue.min.js"></script>
        <script type="text/javascript">
            new Vue({
                el: '#app',
                data: {
                    title: 'Hello World!'
                }
            })
        </script>

2. 恭喜你，你已经成功了一大步了-。-
   简单数据类型、复杂数据类型、函数等都可以在插值表达式中进行显示，并且不需要写this.title，也不需要写data，我们的函数编写在methods内，直接{{ fn() }}调用即可；

<div id="app">
            <p>
                {{ ['a','b','c'][1] }}
                <br/>
                {{ {"name":"vane","age":38,"sex":1}.age }}
                <br/>
                {{ sayHello() }}
            </p>
        </div>
        <script type="text/javascript" src="https://cdn.bootcss.com/vue/2.6.9/vue.min.js"></script>
        <script type="text/javascript">
            new Vue({
                el: '#app',
                data: {                   
                },
                methods: {
                    sayHello: function() {
                        return "Hello Vue!";
                    }
                }
            })
        </script>

3. v-model可以绑定data的对象值，v-on可以绑定methods下定义的方法，而v-on的缩写则是@，如@input操作；

<div id="app">
            <input type="text" v-model="title"><br/>
            <input type="text" v-on:input="changeTitle"><br/>
            <input type="text" @input="changeTitle"><br/>
            <p>
                {{ title }}
            </p>
        </div>
        <script type="text/javascript" src="https://cdn.bootcss.com/vue/2.6.9/vue.min.js"></script>
        <script type="text/javascript">
            new Vue({
                el: '#app',
                data: {
                },
                methods: {
                    changeTitle: function(e) {
                        //this指向的是data对象
                        this.title = e.target.value;
                    }
                }
            })
        </script>

4. vue中不能在任何html标签的属性值中使用{{ property }}进行设置，需要通过v-bind进行属性值的数据绑定，例如v-bind:href，而v-bind的缩写则是:，如:href操作；

<div id="app">
			<p>
				{{ sayHello() }}
				<!--
					1.下面的链接地址将无法打开；
					2.VueJs中不能在任何html标签的属性值中使用{{ 属性值 }}进行设置操作
				-->
				<a href="{{ link }}">Baidu</a>
				<a v-bind:href="link">Baidu</a>
				<a :href="link">baidu</a>
			</p>
		</div>
		<script type="text/javascript" src="../node_modules/vue/dist/vue.min.js"></script>
		<script type="text/javascript">
			new Vue({
				el:'#app',
				data:{
					title:'Hello World!',
					link:'http://www.baidu.com'
				},
				methods:{
					sayHello:function(){
						return this.title;
					}
				}
			})
		</script>

5. v-once可以让节点渲染的时候只允许渲染一次，就算是方法里重新设置也不作更新，如果没有用v-once的话，{{ data }}将会被进行二次渲染；

<div id="app">
			<p>
				<!--
				1.v-once，可以让节点渲染的时候只允许渲染一次，就算是方法里重新设置也不作更新；
				2.如果不设置v-once的话，{{ title }}将会被进行二次渲染
				-->
				<h1 v-once>{{ title }}</h1>
				{{ sayHello() }}
			</p>
		</div>
		<script type="text/javascript" src="../node_modules/vue/dist/vue.min.js"></script>
		<script type="text/javascript">
			new Vue({
				el:'#app',
				data:{
					title:'Hello World!',
				},
				methods:{
					sayHello:function(){
						this.title = "Hello Vue!";
						return this.title;
					}
				}
			})
		</script>

6. 如果设置的属性是一个html标签类型的内容，那么，直接用表达式方式将会输出“未加工”过的字符串内容，如果想要让其显示其html的内容形式，可以利用v-html的方式进行数据绑定；

<div id="app">
				<!--
				1.如果设置的属性是一个html标签类型的内容，那么，直接用表达式方式将会输出“未加工”过的字符串内容
				2.如果想要让其显示其html的内容形式，可以利用v-html的方式进行数据绑定
				-->
				<p>
					{{ finishedLink }}
				</p>
				<p v-html="finishedLink"></p>
		</div>
		<script type="text/javascript" src="../node_modules/vue/dist/vue.min.js"></script>
		<script type="text/javascript">
			new Vue({
				el:'#app',
				data:{
					finishedLink:"<a href='http://www.baidu.com'>Baidu</a>"
				},
				}
			})
		</script>