序言
江湖上传说最难得的代码就是hello world 学习任何一门语言 只要你能实现hello world，你就成功了一大步，QAQ 不管你信不信 我是信了-。-
因此我们先来个 hello world
- 首先引入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>
- 恭喜你，你已经成功了一大步了-。-
简单数据类型、复杂数据类型、函数等都可以在插值表达式中进行显示，并且不需要写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>
- 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>
- 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>
- 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>
- 如果设置的属性是一个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>