Vue基础知识01-基本使用方法
Vue的基本使用
创建Vue实例
1.引包
// 引入vue.js的CDN地址
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
// 或者下载vue包后引入vue.js的本地地址
<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
2.新建Vue实例
Step 1：html中插入根元素
<div id="app"></div>
Step 2：script中创建实例化对象 mv
var mv = new Vue({
el:"#app" // 指定实例化的DOM的ID号
})
数据绑定
即，将Vue实例中的数据渲染到DOM中，此时的数据流向是单向的（Vue -> DOM // Data -> View）
1.在创建的数据声明中写入数据声明data
var mv = new Vue({
el:'#app', //目的地
data:{
// 可以是对象/函数
msg: "test",
isTrue:1==1
},
});
2.在标签中绑定数据: 使用“Mustache”语法 (双大括号) 的文本插值
<div id="app">Message: {{ msg }}</div>
注：双大括号 中的内容是作为变量形式出现的，因此也可以写为
<span>{{msg}}</span>
<span>{{1+1}}</span>
<span>{{isTrue}}</span>
<span>{{1>2 ? '真' : '假'}}</span>
（记住都得放在根元素中）
部分实例属性
- vm.$data Vue实例观察的数据对象，访问原始数据对象data
（vm.a===vm.$data.a // => true） - vm.$props 当前组件接收到的 props 对象。
- vm.$el Vue实例使用的根 DOM 元素。
- vm.$slots 用来访问被插槽分发的内容。 (例如：v-slot:foo 中的内容将会在 vm.$slots.foo 中被找到)
- vm.$options 用于当前Vue实例的初始化选项，需要在选项中包含自定义属性时会有用处。
- vm.$root 当前组件树的根Vue实例。如果当前实例没有父实例，此实例将会是其自己。
- vm.$emit( eventName, […args] ) 触发当前实例上的事件。附加参数都会传给监听器回调。
Vue的指令系统
部分指令
- v-text 更新元素的 textContent。
<span v-text="msg"></span>
<!-- 和下面的一样 -->
<span>{{msg}}</span>
- v-html 更新元素的 innerHTML 。注意：内容按普通 HTML 插入
<div v-html="<h1>Hi!<h1>"></div>
- v-show 根据表达式之真假值，切换元素的 display CSS 属性。
- v-if 根据表达式的值的 truthiness 来有条件地渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。
- v-else 前一兄弟元素必须有 v-if 或 v-else-if。
- v-for 基于源数据多次渲染元素或模板块。此指令之值，必须使用特定语法 alias in expression ，为当前遍历的元素提供别名。
<div v-for="item in items">
{{ item.text }}
</div>
- v-on 绑定事件监听器。用在普通元素上时，只能监听原生 DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。
语法：v-on:原生事件名="函数名/js代码" 缩写：:@原生事件名="函数名/js代码"
<!-- 方法处理器 -->
<button v-on:click="doThis"></button>
<!-- 缩写 -->
<button @click="doThis"></button>
// 需要在`methods` 对象中定义函数方法
var vm = new Vue({
el: '#example-2',
data: {
name: 'Vue.js'
},
methods: {
// fun为函数名
fun: function (event) {
// `this` 在方法里指向当前 Vue 实例
alert('Hello ' + this.name + '!')
}
}
})
// 也可用js代码直接调用方法
vm.fun()
- v-bind 动态地绑定标签上的属性(内置属性/自定义属性)，或一个组件 prop 到表达式。
<!-- 绑定一个属性 -->
<img v-bind:src="imageSrc">
<!-- 缩写 -->
<img :src="imageSrc">
<!-- class 绑定 -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
- v-model 在表单控件或者组件上创建双向绑定。
select 字段将 value 作为 prop 并将 change 作为事件。
- v-slot 插槽
Vue的双向数据绑定
(Vue <-> DOM // Data <-> View)
利用v-model，本质上是个语法糖,是v-bind:value + v-on:input的体现。
（简单的说，v-model后跟的变量，在Vue和DOM之间是保持同步的）
text 和 textarea 元素使用 value 属性和 input 事件；
<!-- 接收input的value值为变量message，并传给Vue -->
<input v-model="message" placeholder="edit me">
<!-- 用Vue中的message向{{ }}内插值 -->
<p>Message is: {{ message }}</p>
checkbox 和 radio 使用 checked 属性和 change 事件；
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
局部组件的创建
共三步，声明 -> 挂载 -> 使用
Step 1：组件声明
var App = {
data:{},
methods:{},
template:''
}
Step 2：组件挂载
var vm = new Vue({
el:'#app',
data:{},
// 挂载子组件
components:{
App
},
template:''
})
Step 3：组件使用
var vm = new Vue({
el:'#app',
data:{},
// 挂载子组件
components:{
App
},
// 父组件直接可使用
template:`<App></App>`
})
全局组件的创建
全局组件与局部组件的创建类似，因为全局组件是挂载在Vue根元素上的，所以可写成
Vue.component('Vbtn',{
template:`
<button>按钮</button>
`
});
相当于在Vue的component属性中直接写上组件声明，省去挂载步骤。全局组件的使用与局部组件一致。
父组件向子组件通信
父组件=>子组件 共三步：
1. 先给父组件中绑定自定义的属性(挂载)
2. 在子组件中使用props接受父组件传递的数据(props)
3. 在自组件中任意使用父组件传递的数据
Step 0：定义两个组件Parent和Child，父组件中有数据msg。
// Child组件（全局）
Vue.component('Child',{
template:`
<div>
<p>我是子组件</p>
</div>
`
})
// Parent组件（全局）
Vue.component('Parent',{
data:{
msg:'我是父组件的数据 Hi'
},
template:`
<div>
<p>我是父组件</p>
</div>
`
})
// Parent组件（局部）
var App = {
template:`
<div>
<Parent/>
</div>
`
};
// Vue实例
new Vue({
el:'#app',
data:{},
components:{
App
},
template:'<App/>'
})
Step 1：先给父组件中绑定自定义的属性(挂载)，设置Child组件的childData属性值为"msg"。
Vue.component('Parent',{
data(){
return{
msg:'我是父组件的数据 Hi'
}
},
template:`
<div>
<p>我是父组件</p>
<Child :childData='msg'/>
</div>
`
})
Step 2：在子组件中使用props接受父组件传递的数据
Vue.component('Child',{
template:`
<div>
<p>我是子组件</p>
</div>
`,
props:['childData']
})
Step 3：在自组件中任意使用父组件传递的数据
Vue.component('Child',{
template:`
<div>
<p>我是子组件</p>
<input type="text" v-model='childData'/>
{{childData}}
</div>
`,
props:['childData']
})
子组件向父组件通信
子组件=>父组件 共三步：
1. 在父组件绑定自定义事件
2. 在子组件中触发原生的事件
3. 在函数中使用$emit触发自定义的childHandler
Step 1：在父组件绑定自定义事件
// 父组件
Vue.component('Parent',{
data(){
return{
msg:'我是父组件的数据 Hi'
}
},
template:`
<div>
<p>我是父组件</p>
<Child :childData='msg' @childEvent=' childHandler'/>
</div>
`,
methods:{
chidHandler(val){
console.log(val);
}
}
})
//
var App = {
template:`
<div>
<Parent/>
</div>
`
};
//
new Vue({
el:'#app',
data(){
return{
}
},
components:{
App
},
template:'<App/>'
})
Step 2：在子组件中触发原生的事件input
// 子组件
Vue.component('Child',{
// 2.
template:`
<div>
<p>我是子组件</p>
<input type="text" v-model='childData' @input='changeValue'/>
</div>
`,
props:['childData'],
methods:{ }
}
})
Step 3：在函数中使用 $emit 触发自定义的childHandler
// 子组件
Vue.component('Child',{
template:`
<div>
<p>我是子组件</p>
<input type="text" v-model='childData' @input='changeValue'/>
</div>
`,
props:['childData'],
methods:{
// 3.
changeValue(val){
// 自定义的事件通过$emit()触发
// $emit(自定义事件名,消息)
this.$emit('childHandler', val)
}
}
})
