vue详解
1.首先要创建div跟标签
<div id="app">
{{ m }}
</div>
实例：var vue = new Vue({
el:'#app',//div的id前面要加#；
data:{
m:'hello' //这里存放数据；
}
})
2.基本指令
1)v-if
<div id="app">
<p v-if="m">qdwdwqdwd </p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/javascript">
var vue = new Vue({
el: '#app',
data: {
m:true
}
})
2)v-for
<div id="app-4">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/javascript">
var app4 = new Vue({
el: '#app-4',
data: {
todos: [
{ text: '学习 JavaScript' },
{ text: '学习 Vue' },
{ text: '整个牛项目' }
]
}
})
3）v-model
<div id="app">
<p>{{ m }}</p>
<input v-model="m">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
m:"wqdwd",
}
})
4）v-bind
v-bind就是用于绑定数据和元素属性的
var app = new Vue({
el:'.app',
data:{
url:"https://www.baidu.com",
}
});
<div class="app">
<a v-bind:href="url">click me</a>
</div>
注意：
v-bind后面是：属性名=，我的理解是表示绑定这个属性，绑定之后，对应的值要去vue的数据里面找。
当我们在控制台改变url时，对应也会变化。
相同的，我们还可以绑定图片src属性、超链接的class
var app = new Vue({
el:'.app',
data:{
url:"https://www.baidu.com",
imgsrc:"https://cn.vuejs.org/images/logo.png",
class:"btn btn-default"
}
});
<div class="app">
<a v-bind:href="url" v-bind:class="klass">click me</a>
<img v-bind:src="imgsrc">
</div>
另外一种够可以传入一个对象，如下
对象的名active，表示要添加的类名，isActive是vue中的数据，表示在什么情况下添加该类名，对应为真才添加。
<div class="app">
<a v-bind:class="{active:isActive}">click me</a>
</div>
通常我们可以将v-bind：简写成：
<div class="app">
<a :class="{active:isActive}">click me</a>
</div>
3.自定义指令
div id="app">
<h1>{{msg}}</h1>
<p v-change v-if="flag">这个显示数据</p>
<button @click="isflag"></button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
msg:'hello',
flag:true
},
methods:{
isflag:function(){
this.flag = !this.flag
}
},
directive:{//局部指令
change:{
bind:function(el,bindings){
console.log(el);
console.log(bindings);
},
unbind:function(){
console.log("解除");
}
}
}
})
</script>
4.全局组件和局部组件
<div id="app">
<global-demo></global-demo>
<scope-demo></scope-demo>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/javascript">
Vue.component('global-demo',{
template:'<h1>这个一个全局组件</h1'
})
new Vue({
el:'#app',
data:{
},
components : {
'scope-demo':{
template:'<h2>这个一个局部组件</h2>'
}
}
})
5.传参
<div id="app">
<h1>{{message}}</h1>
<hr>
<father></father>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/javascript">
Vue.component('father',{
data:function(){
return{
msg:"这个是父组件的内容"
}
},
template:`<div>
{{msg}}
<p><input type="text" v-model="msg"></p>
<son v-bind:msg="msg"></son>
</div>
`
})
Vue.component('son',{
props:['msg'],
data:function(){
return{
}
},
template:`<div>
接收到msg的参数为:{{msg}}
</div>
`
})
new Vue({
el:'#app',
data:function(){
return{
message:"hello"
}
}
})
</script>
</script>
