Vue基础知识01-基本使用方法

时间：2020-03-08 01:05:07 阅读：75 评论：0 收藏：0 [点我收藏+]

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中插入根元素

，id为"app"

<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)
????????????????}
????????????}
????????})

Vue基础知识01-基本使用方法

原文：https://www.cnblogs.com/chri330dj/p/12439220.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)