vue.js入门

原文创建时间：2021年-2023年间
标签（空格分隔）： js vue

特点（优势）

不需要考虑对dom元素的操作,数值更改网页即时更新

官方帮助文档

https://cn.vuejs.org/

导包

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

语法

html中
{{ data名 }} 叫作插值表达式

<div id="app">
{{message}}
</div>

js中

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

特殊情况：
js中有school对象时

   let test = new Vue({
        el:"#app",
        data:{
            number:"1239843",
            school:{
                name:"某某大学",
                adress:"某某路"
            }
        }
    })

在html中
通过 . (英文句号)取用school的内容

<div id="app">
{{school.name}}
</div>

vue指令(v-)

v-text 设置标签内容

html中

<div id="app">
<h1 v-text="message+'文字'"></h1>
</div>

与

<div id="app">
<h1> {{message}}+文字 </h1>
</div>

作用几乎相同，只是{{}}更方便，v-text会改变h1内所有值

v-html

大部分与v-text相同
不同点：text不解析html标签，html会将里面的标签解析

v-on 事件绑定

官方说明文档：https://cn.vuejs.org/v2/api/#v-on
eg. 绑定click事件
html中

<input id="btn1" type="button" value="v-on指令" v-on:click="doIt">

简写

<input id="btn1" type="button" value="v-on指令简写" @click="doIt">

js中

let btn = new Vue({
    el:"#btn1",
    methods:{
        doIt:function(a){
            alert("执行方法"+a);
        }
    }
})

eg. @ablclick 双击事件(用法同上）
传参：@clilck="doIt(5)"

通过英文句号"."绑定事件监听器

<input type="text" @keyup.enter="woc(555)">

v-show 控制display:none

v-show="boolean";
如果是false,则该元素为display:none;

v-if 控制dom树

v-if="boolean";
如果是false,则该元素从dom树中消失

注意：频繁切换显示的元素用v-show,dom树改变更消耗性能

v-bind 操作元素的属性

原生html的属性

<img src="">

用v-bind

<img v-bind:src="imgSrc">

简写

<img :src="imgSrc">

let app = new Vu({
    el:"img",
    data:{
        imgSrc:"图片地址"
    }
}）

v-for 从数组取值依次生成数组长度的元素

以下分别是对数据，对象，索引的取用
html

<div id="vfor">
    <p v-for="item in arr">
        {{item}}
    </p>
    <div v-for="item in objArr">
        {{item.name}}
    </div>
    <div v-for="(item,index) in arr">
        {{index}}
    </div>
</div>

let vfor = new Vue({
        el:"#vfor",
        data:{
            arr:[
                "摩洛哥","华盛顿","洛杉矶"
            ],
            objArr:[
                {name:"jack"},{name:"pick"},{name:"mike"}
            ]
        }
    })

效果：
摩洛哥
华盛顿
洛杉矶
jack
pick
mike
0
1
2

v-model 双向同步信息

html

<div id="vmodel">
    <input type="button" value="切换" @click="setMg(666)">
    <input type="text" v-model="message" @keyup.enter="tips">
</div>

let vmodel = new Vue({
        el:"#vmodel",
        data:{
            message:"wow"
        },
        methods:{
            setMg:function(a){
                this.message=a;
            },
            tips:function(){
                alert(this.message);
            }
        }
    })

v-model中的信息可以在输入框和变量中同步更新

v-once

作用：使某数据只渲染一次

<div v-once id="app">
{{school.name}}
</div>

在此后对school.name修改将不会发生变化

数据与方法

Object.freeze()

Object.freeze(obj)
obj对象将不再是应式

带$符号的方法

var data = { a: 1 }
var vm = new Vue({
  el: '#example',
  data: data
})

vm.$data === data // => true
vm.$el === document.getElementById('example') // => true

// $watch 是一个实例方法
vm.$watch('a', function (newValue, oldValue) {
  // 这个回调将在 `vm.a` 改变后调用
})

生命周期钩子

补充：axios 功能强大的网络请求库

在线导包

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

watch 监听属性

当data 中 name 变化时，watch 会自动执行

watch:{
    name(newName,oldName){
        console.log(newName)
    }
}

组件（components）

组件注册

注意：在文档中，组件必须注册在Vue实例之前

全局注册

Vue.component({'组件名',{
    data(){
        data1:"数据1"
    },
    methods:{
        method1(){console.log('HelloVue!')}
    },
    template:{
        <div>根标签
            <h2>标题2</h2>
            <p>所有内容都要在根标签下，必须有且只能有一个根标签</p>
        </div>
    }
})

局部注册

通过props向子组件传递数据

props功能：自定义attribute,通过组件标签的attribute子组件传递数据

Vue.component('test',{
    props:['title','text'],
    template:`
        <h3>{{title}}</h3>
        <p>{{text}}</p>
    `
})

    <div id="app">
            <test title="I'm a title" text="Some words here"></test>
    </div>

监听子组件事件

功能：使子组件可操作父组件的数据

命名注意事项
使用 in-DOM 模板时，您不能使用 v-on 来监听 camelCase（驼峰命名）事件。
you cannot use v-on to listen to camelCase events when using in-DOM templates.

new Vue({
    el:"#app",
    data:{
        count:0
    }
})

Vue.component('test',{
    template:`
        <div>
            <h3>标题</h3>
            <button v-on:clic="$emit('do-it')">父级count加一</button>
        </div>
    `
})

    <div id="app">
    {{count}}
        <test v-on:do-it="count++"></test>
    </div>

Vue.js入门