Vue入门

打工人上人

已于 2022-04-30 08:52:07 修改

阅读量204

点赞数

分类专栏：前端文章标签： vue.js

于 2021-05-23 22:33:57 首次发布

本文链接：https://blog.csdn.net/weixin_48320674/article/details/117201192

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Vue的生命周期

常用的生命周期钩子：

mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。
beforeDestroy: 清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。

关于销毁Vue实例

销毁后借助Vue开发者工具看不到任何信息。
销毁后自定义事件会失效，但原生DOM事件依然有效（会触发，但看不到数据）。
一般不会在beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了。
beforeCreate() {},
created() {},
beforeMount() {},
mounted() {},
beforeUpdate() {},
updated() {},
beforeDestroy() {},
destroyed() {},

idea 安装 Vue 插件

没有Vue component选项

1. 点击 file 打开设置 settings，展开 Editor 找到 file and code templates
2. 找到 Vue single file component 并选中它，然后点击copy
3. 复制后底部出现了一个新的文件
4. 把 Name 改成 Vue Component，然后把代码里的 “COMPONENT_ ”删掉，最后点 ok 就完事了

特点

1. 遵循 MVVM 模式

2. 编码简洁, 体积小, 运行效率高, 适合移动/PC 端开发

3. 它本身只关注 UI, 也可以引入其它第三方库开发项

与其它 JS 框架的关联

1. 借鉴 Angular 的模板和数据绑定技术

2. 借鉴 React 的组件化和虚拟 DOM 技术

导入(vue.js)

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>

第一个案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--view层-->
<div id="app">
    {{message}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
<script>
    var vm=new Vue({
        el:"#app",
        /*数据：model*/
        data:{
            message:"helloworld!"
        }
    });
</script>
</body>
</html>

MVVM（model-view-viewmodel）

MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式，其核心是提供对View 和 ViewModel 的双向数据绑定，这使得ViewModel 的状态改变可以自动传递给 View，即所谓的数据双向绑定。

循环与判断

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--view层-->
<div id="app-3">
    <p v-if="seen==='a'">a</p>
    <p v-else-if="seen==='b'">b</p>
    <p v-else="seen==='c'">c</p>

    <ol>
        <li v-for="(todo,index) in todos">
            {{ todo.text }}{{ index }}
        </li>
    </ol>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
<script>
    var vm=new Vue({
        el: '#app-3',
        data: {
            seen: 'a',
            todos: [
                { text: '学习 JavaScript' },
                { text: '学习 Vue' },
                { text: '整个牛项目' }
            ]
        }
    });
</script>
</body>
</html>

绑定事件

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--view层-->
<div id="app-3">
    <button v-on:click="greet">Greet</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: '#app-3',
        data: {
            name: 'Vue.js'
        },
        methods: {
            greet: function (event) {
                // `this` 在方法里指向当前 Vue 实例
                alert('Hello ' + this.name + '!')
                // `event` 是原生 DOM 事件
                if (event) {
                    alert(event.target.tagName)
                }
            }
        }
    });
</script>
</body>
</html>

双向绑定

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--view层-->
<div id="app-3">
    <select v-model="selected">
        <option disabled value="">请选择</option>
        <option v-for="option in options" v-bind:value="option.value">
            {{ option.text }}
        </option>
    </select>
    <span>Selected: {{ selected }}</span>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: '#app-3',
        data: {
            selected: 'A',
            options: [
                {text: 'One', value: 'A'},
                {text: 'Two', value: 'B'},
                {text: 'Three', value: 'C'}
            ]
        }
    });
</script>
</body>
</html>

组件

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--view层-->
<div id="app-3">
    <name v-for="option in options" v-bind:data="option"></name>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
<script>
    Vue.component("name",{
        props:['data'],
        template:'<li>{{data}}</li>'
    });
    var vm = new Vue({
        el: '#app-3',
        data: {
            options: ["java", "c", "python"
            ]
        }
    });
</script>
</body>
</html>

Axios异步通信

新建一个.json文件

{
  "name": "java",
  "url": "http://baidu.com",
  "isNonProfit": true,
  "address": {
    "city": "长沙",
    "country": "中国"
  },
  "links": [
    {
      "url": " https ://www.bilibili.com/"
    },
    {
      "url": "https://www.4399.com/"
    },
    {
      "url": "https://www.baidu.com/"
    }
  ]
}

读取json数据

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*解决刚开始显示数据为{{message}}*/
        [v-clock]{
            display: none;
        }
    </style>
</head>
<body>
<!--view层-->
<div id="app-3" v-clock>
    <div>{{info.name}}</div>
    <div>{{info.address.city}}</div>
    <a v-bind:href="info.url">点击</a>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!--<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>-->
<script>
    var vm = new Vue({
        el: '#app-3',
        data(){
            return{
                info:{
                    name:null,
                    url:null,
                    address:{
                        city:null,
                        country:null
                    }
                }
            }
        },
        mounted(){
            axios.get('data.json').then(response=>(this.info=response.data))
        }
    });
</script>
</body>
</html>

计算属性（相当于缓存）

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*解决刚开始显示数据为{{message}}*/
        [v-clock] {
            display: none;
        }
    </style>
</head>
<body>
<!--view层-->
<div id="app-3" v-clock>
    <div>{{currentTime1()}}</div>
    <div>{{currentTime2}}</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!--<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>-->
<script>
    var vm = new Vue({
        el: '#app-3',
        methods: {
            currentTime1: function () {
                return Date.now()
            }
        },
        computed: {
            currentTime2: function () {
                return Date.now()
            }
        }
    });
</script>
</body>
</html>

自定义事件

@remove为自定义事件（不能含大写字母）

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*解决刚开始显示数据为{{message}}*/
        [v-clock] {
            display: none;
        }
    </style>
</head>
<body>
<!--view层-->
<div id="app-3" v-clock>
    <father>
        <son1 slot="son1" :title="title"></son1>
        <son2 slot="son2" v-for="(option,index) in options" :option="option" :index="index" @remove="removeList" ></son2>
    </father>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
<script>
    Vue.component("father", {
        template: '<div>\<slot name="son1"></slot>\<ul>\<slot name="son2"></slot>\</ul>\</div>'
    });
    Vue.component("son1", {
        props:['title'],
        template: '<div>{{title}}</div>'
    });
    Vue.component("son2", {
        props:['option','index'],
        template: '<li>{{index}}-----{{option}}<button @click="remove">删除</button></li>',
        methods:{
            remove:function (index){
                this.$emit('remove',index);
            }
        }
    });
    var vm = new Vue({
        el: '#app-3',
        data:{
            title:"科目",
            options:["java","c","python"]
        },
        methods:{
            removeList:function (index){
                this.options.splice(index,1);
            }
        }
    });
</script>
</body>
</html>