vue基础

Posted aden668

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue基础相关的知识,希望对你有一定的参考价值。

Vue基础

渐进式javascript框架

通过对框架的了解与运用程度,来决定其在整个项目中的应用范围,最终可以以独立框架方式完成整个web前端项目

走进Vue

1.什么是vue

可以独立完成前后端分离式web项目的JavaScript框架

2.为什么要学习vue

三大主流框架之一-: Angular React Vue
先进的前端设计模式:MVVM
可以完全脱离服务器端,以前端代码复用的方式渲染整个页面:组件化开发

3.特点

单页面web应用

数据驱动

数据的双向绑定

虚拟DOM

4.如何使用vue

开发版本: vue.js

生产版本: vue.min.js

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
      
    </style>
</head>
<body>
    <div id="app">
        <div class="box">
            <div class="b1"></div>
            <div class="b2"></div>
        </div>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app'
    })
</script>
</html>

vue导入-挂载点

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>vue导入</title>
</head>
<body>
    <div id="app">
        <hr>
        <p class="p1">{{ }}</p>
        <hr>
        <p class="p2">{{ }}</p>
        <hr>
        <p id="p">
            <b>{{ }}</b>
            <i>{{ }}</i>
        </p>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    console.log(Vue);
    // new Vue({
    //    el: '.p1',
    // });
    // new Vue({
    //     el: '.p2'
    // });
    // new Vue({
    //     el: '#p'
    // })

    // el为挂载点,才有css3选择器语法与页面标签进行绑定,决定该vue对象控制的页面范围
    // 1.挂载点只检索页面中第一个匹配到的结果,所以挂载点一般都采用id选择器
    // 2.html与body标签不可以作为挂载点(组件中解释)
    new Vue({
        el: '#app',
    })
</script>
</html>

vue变量

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>变量</title>
</head>
<body>
    <div id="app">
        <p>{{ msg }}</p>
        <p>{{ info }}</p>
        <h3>{{ msg }}</h3>
    </div>

    <div id="main">
        <p>{{ msg }}</p>
        <p>{{ info }}</p>
    </div>
</body>
<script src="js/vue.js"></script>
<script>

    // 实例成员中的data是为vue页面模板通过数据变量的
    let app = new Vue({
        el: '#app',
        data: {
            msg: 'message',
            info: 'vue变量信息'
        }
    });

    let main = new Vue({
        el: '#main',
        data: {
            msg: 'msg',
            info: 'info'
        }
    });

    console.log(app.info);
    console.log(main.info);

    // 创建vue实例(new Vue)传进去的字典(对象)的key,称之为vue实例成员(变量)
    // 访问实例成员,用 vue实例.$成员名, eg:app.$el
    console.log(app.$el);
    console.log(app.$data);

    console.log(app.$data.info);
</script>
</html>

vue事件

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>事件</title>
    <style>
        body {
            /*页面内容不允许被选中*/
            user-select: none;
        }
        .p1:hover {
            cursor: pointer;
            color: green;
        }
    </style>
</head>
<body>
    <div id="app">
        <p class="p1" v-on:click="fn">这是一个段落,被点击了{{ count }}下</p>
        <p class="p2" v-on:mouseover="overAction" v-on:mouseout="outAction" >该便签被{{ action }}</p>

        <div v-on:mouseover="overAction" v-on:mouseout="outAction">div被{{ action }}</div>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            count: 0,
            action: '渲染',
            // fn: function () {
            //     // console.log(app.count);
            //     // app.count ++
            //     console.log(this);  // this不是该vue实例对象,是顶级Window对象
            // }
        },
        // methods就是为vue实例提供事件函数的
        methods: {
            fn: function () {
                // console.log(app.count);
                // app.count ++;
                // console.log(this);  // this代表当前该vue实例对象
                this.count ++
            },
            overAction: function () {
                this.action = '悬浮'
            },
            outAction: function () {
                this.action = '离开'
            }
        }
    });

</script>
</html>

js的对象

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>js的对象</title>
</head>
<body>

</body>
<script src="js/vue.js"></script>
<script>
    // 1.js中没有字典,只要对象类型,可以把对象当做字典来使用
    // 2.key本质是属性名,所以都是字符串类型(可以出现1,true),其实都是省略引号的字符串

    let sex = '男';
    let dic = {
        'name': 'Owen',
        1: 100,
        true: 12345,
        age: 18,
        // sex: 'sex',
        sex,
    };
    console.log(dic['name']);
    console.log(dic['1']);
    console.log(dic['true']);
    console.log(dic['age']);
    console.log(dic.sex);

    dic.price = 3.5;
    console.log(dic.price);

    // 声明类创建对象,类可以实例化n个对象,哪个对象调用,this就代表谁
    function People(name, age) {
        this.name = name;
        this.age = age;
        this.eat = function () {
            console.log(this.name + '在吃饭');
            return 123
        }
    }
    let p1 = new People('Owen', 17.5);
    console.log(p1.name);
    let res = p1.eat();
    console.log(res);

    // 直接声明对象,{}内的key都属于当前对象的
    // {}中的方法通常会简写
    let stu1 = {
        name: '张三',
        age: 18,
        // eat: function () {
        //     console.log(this.name + '在吃饭');
        // }
        eat () {
            console.log(this.name + '在吃饭');
        }
    };
    stu1.eat()

    // 总结:
    // 1.{}中直接写一个变量:key与value是同名,value有该名变量提供值
    // 2.es5下,所有的函数都可以作为类,类可以new声明对象,在函数中用 this.资源 为声明的对象提供资源
    // 3.{}中出现的函数叫方法,方法可以简写 { fn: function(){} } => { fn(){} }
</script>
</html>

以上是关于vue基础的主要内容,如果未能解决你的问题,请参考以下文章

VSCode自定义代码片段——.vue文件的模板

VSCode自定义代码片段(vue主模板)

VSCode自定义代码片段11——vue路由的配置

VSCode自定义代码片段11——vue路由的配置

VSCode自定义代码片段11——vue路由的配置

VSCode自定义代码片段2——.vue文件的模板