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>

vue详解

原文：https://www.cnblogs.com/luchengx/p/12594419.html