码迷，mamicode.com
首页 > 其他好文 > 详细

1216 Vue基础

时间：2019-12-17 00:59:40      阅读：147      评论：0      收藏：0      [点我收藏+]

标签：web项目   methods   样式   列表   替换   vue   v-on   sage   拼接   

目录

前端框架

  • angular ---更新程度太快,且不向下兼容
  • react ----- 移动端大多都使用
  • vue
vue
    有前两大框架的优点,摒弃缺点
    但没有他们框架健全

Vue

1.简介

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

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

1.1 优点

  • 中文API
  • 单页面应用
  • 组件化开发
  • 数据双向绑定
  • 虚拟DOM
  • 数据驱动思想(相比DOM驱动)

2 使用

所有的script标签,在body与html标签之内的都会在body最下方加载

通过<script>引入vue.js文件,在<script>标签中实例化vue对象获取关联

2.1 基础

1. 挂载点

el指点与页面中的标签建立关联

  • 通常挂载点都采用id选择器(唯一性)
  • html与body标签不能作为挂载点(组件知识点)
<body>
    <section>
        <div id="d1">
            {{ msg }}
            <p> {{ info }} </p>
        </div>
    </section>
</body>
<script src="vue/vue.js"></script>
<script>
    // let app = new Vue({
    //     el:'#d1',           // 挂载点,vue实例与页面标签建立关联
    // });
    new Vue({
        el:'section',        // 挂载点采用的是css3选择器语法,但是只能匹配第一次检索到的结果
        // data为挂载点提供数据
        data:{
            msg:'message',
            info:'信息'
        }
    })
</script>
</html>

2. 方法属性

data:{}控制变量

methods:{}控制属性的变化

  • 声明的实例不需要使用变量来接收,用this代表当前vue实例本身

  • 在实例外部或其他实例内部, 需要定义一个变量接受new Vue()产生的实例

  • console.log(app.pClick);
console.log(this.pClick);
<body>
    <section>
        <div id="d1">
            {{ msg }}
            <p v-on:click="pClick" v-bind:style="pStyle">{{ info }}</p>
        </div>
        <hr>
        <div class="d2">
            {{ }}
        </div>
        <hr>
        <div class="d2">
            {{ }}
        </div>
    </section>
</body>
<script src="js/vue.js"></script>
<script>
    `
    console.log(Vue);
    let app = new Vue({
        el: '#d1',  // 挂载点：vue实例与页面标签建立关联
    });

    new Vue({
        el: '.d2',  // 挂载点采用的是css3选择器语法，但是只能匹配第一次检索到的结果
    });
    `;
    // 总结：
    // 1、通常挂载点都采用id选择器（唯一性）
    // 2、html与body标签不能作为挂载点(组件知识点解释)

    // new Vue({
    //     el: 'body'
    // })
    let app = new Vue({
        el: 'section',
        data: {  // data为挂载点内部提供数据
            msg: 'message',
            info: '信息',
            pStyle: {
                color: 'yellowgreen'
            }
        },
        methods: {
            pClick: function () {
                if (app.pStyle.color !== 'yellowgreen') {
                    app.pStyle.color = 'yellowgreen'
                } else {
                    app.pStyle.color = 'red'
                }
                console.log(app.msg);
                console.log(app.pClick);
                console.log(this.msg);
                console.log(this.pClick);
            }
        }
    });

    // 声明的实例是否用一个变量接收
    // 1、在实例内部不需要，用this就代表当前vue实例本身
    // 2、在实例外部或其他实例内部需要，定义一个变量接收new Vue()产生的实例
    console.log(app.msg)

</script>
</html>

3. 插值表达式

{{ }} 用于文本插值

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

算术运算

        <p>{{ num * 10 }}</p>
拼接
        <p>{{ msg + num }}</p>

取值

        <p>{{ msg[1] }}</p>
        <p>{{ (msg + num)[3] }}</p>

方法

        <p>{{ msg.split('') }}</p>

2.2 文本指令

  • {{ }}插值表达式
  • v-text
  • v-html
  • v-once

1. v-text

不能解析html,只输出文本

<p v-text="info"> 旧文本 </p>
    如果有旧文本,则会被替换

2. v-html

能够解析html语法的文本

<p v-html="info"></p>

new vue({
    el:'#app',
    data:{
        msg:'message',
        info:'<i> 这是info斜体字 </i>
    }
})

3. v-once

处理的标签内容只能被解析一次

添加之后,只会被解析一次
<p v-on:click="pClick" v-once>{{ msg + info }}</p>

2.3 事件指令

v-on:事件名 = ‘方法变量‘

简写:@事件名 = ‘方法变量‘

  • 点击事件click
  • 悬浮mouseover
  • 离开mouseout
  • 按下mousedown
  • 按下抬起mouseup
  • 按下移动mousemove
  • 右键contextmenu

事件变量

  • 事件的变量加括号是传参
  • 事件对象本身为$event
* 事件变量,不添加(),默认会传事件对象:$event
* 事件变量,添加(),代表要自定义传参,系统不再传入事件对象,但是可以手动传入事件对象

    <p @click="f8($event,'第一个)">{{ info }}</p>
    <p @click="f8($event,'第二个)">{{ info }}</p>

            f8 (ev,argv){
                console.log(ev,argv);
                this.info = argv + '点击了'
            }

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <p @click="f1">{{ msg }}</p>
    <hr>
    <!--鼠标悬浮/离开-->
    <p @mouseover="f2" @mouseout="f3">{{ action }}</p>
    <hr>
    <!--鼠标按下/按下抬起/按下移动-->
    <p @mousedown="f4" @mouseup="f5" @mousemove="f6">{{ action }}</p>
    <!--右键-->
    <p @contextmenu="f7">{{ action }}</p>


</div>

</body>
<script src="vue/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            msg:'点击切换',
            action:'鼠标事件',
        },
        methods:{
            f1 (){
                this.msg = '点击了'
            },
            f2 (){
                this.action = '悬浮了'
            },
            f3 (){
                this.action = '鼠标离开'
            },
            f4 (){
                this.action = '鼠标按下'
            },
            f5 (){
                this.action = '鼠标抬起'
            },
            f6 (){
                this.action = '鼠标按下时移动'
            },
            f7 (){
                this.action = '右键'
            },

        }
    })
</script>
</html>

2.4 属性指令

v-bind:属性名=‘变量‘

简写成:属性名=‘变量‘

1. 简单使用(单值的使用)

<p v-bind:title="pTitle" :abc="def">简单使用</p>
    ....
        data: {
            pTitle: '简单使用',
            def: '自定义属性',}
            ....

2. class的属性绑定

<!--c1变量的值就是类名-->
        <p :class="c1"></p>
            c1: 'd1 d2',

<!--多类名可以用[]语法，采用多个变量来控制-->
        <p :class="[c2, c3]"></p>
            c2: 'd1',
            c3: 'd3',
            
        <!--选择器位可以设置为变量，也可以设置为常量-->
        <p :class="['d1', c4]"></p>
            c4: 'd3','d1'直接是默认的样式
            
            
<!--{类名: 布尔值}控制某类名是否起作用-->
            <!--<p :class="{x1: false}"></p>-->
      <!--多种语法混用-->
            第一个是固定样式,是否为真
            <p :class="['d1', {d2: is_true}]" @click="is_true = !is_true"></p>

3. 样式属性(了解)

<p :style="myStyle">样式属性</p>

        data中定义:
            myStyle: {
                width: '100px',
                height: '100px',
                backgroundColor: 'red'
            }


<p :style="{width: w,height: h, backgroundColor: bgc}">样式属性</p>

        data中定义:
            w: '200px',
            h: '100px',
            bgc: 'green'

JS面向对象补充

数据类型

undefined/null/string/number/boolean/object(Array)/function

定义变量的方式

var/let/const/不写

对象object与function

面向过程(函数)
    function f1(){
        console.log('f1 run)
    }
    f1();
面向对象
    定义类(构造函数 == 类)
    function F2(){
    console.log('f1 run)
    }
    f1();
    
JS中类的参数的传值与接收互相分离,多传值不会接收,少传值会是undefined参数
        // 构造函数 == 类
    function F2(name) {
        this.name = name;
        this.eat = function (food) {
            console.log(this.name + '在' + food);
        }
    }
    let ff1 = new F2("Bob");
    console.log(ff1.name);

    let ff2 = new F2("Tom");
    console.log(ff2.name);

    ff1.eat('饺子');
    ff2.eat('sao子面');

直接定义对象(方法的简写)

类
    let obj = {
        name: 'Jerry',
        eat: function (food) {
            console.log(this.name + '在' + food)
        },
        
        方法可以直接简写:
        
        eat(food) {  // 方法的语法
            console.log(this.name + '在' + food)
        }
    };
    console.log(obj.name);
    obj.eat('hotdog');

JS函数的补充

定义变量

作用域 : 全局 -- 块级 -- 局部

var         // for循环时,会是全局的
let         // 不能重复定义,且具备块级作用域,出去括号就不认了
const       // 常量不可以修改
不写          // 函数内定义则是全局变量

函数的定义

第一种
    function f1(){
        console.log('f1')
    }
    f1();
    
第二种
    let f2(){
        console.log('f2')
    }
    f2();
    
第三种(箭头函数)
    let f3 = () => {
        console.log('f3')
    };
    f3();

箭头函数

如果箭头函数没有函数体,只有返回值
    let f4 = (n1,n2) => {
        return n1 + n2;
    }
    
可以写成
    let f4 = (n1,n2) => n1 + n2;
    let res = f4(10,25);
    console.log(res)

如果兼有函数参数列表只有一个,可以省略括号()
    let f5 = num => num * 10;
    let res = f5(10);
    console.log(res);

重点:

function/箭头函数/方法都具有本质区别

<script>
    let obj = {
        name: 'Jerry',
        
    // function
        eat: function (food) {
            console.log(this.name + '在' + food)
            
    // 箭头函数  (this不找当前调用者,找调用者的父一层)
        eat: food => {
            console.log(this)// 指向window
            console.log(this.name + '在' + food) //箭头函数this不能指向上层
            
            
    // 方法
        eat (food) {   // 方法的语法
            console.log(this);
            console.log(this.name + '在' + food) }
    };

    obj.eat('123')
            

---------------------------------------------------------


    new Vue({
        data: {
            res: ''
        },
        methods: {
            fn () {
                // axios插件
                let _this = this;
                this.$axios({
                    url: '',
                    method: 'get',
                    data: {

                    },
                }).then(function (response) {
                    _this.res = response.data;
                })
            },
            fn1 () {
                // axios插件
                this.$axios({
                    url: '',
                    method: 'get',
                    data: {

                    },
                }).then(response => {
                    this.res = response.data;
                })
            }
        }
    })
            
</script>

作业

技术图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
        }

    </style>
</head>
<body>
<div id="app">
    <p class="box" :style="{backgroundColor: bgc}"></p>

    <input type="button" value="红" @click="c_red">
    <input type="button" value="黄" @click="c_ye">
    <input type="button" value="蓝" @click="c_bl">
</div>
</body>
<script src="vue/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            bgc:'white'
        },
        methods:{
            c_red(){
                this.bgc = 'red'
            },
            c_ye(){
                this.bgc = 'yellow'
            },
            c_bl(){
                this.bgc = 'blue'
            },
        }
    })

</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #wrap {
            width: 200px;
            height: 200px;
            background-color: red;
        }

    </style>
</head>
<body>
<div id="app">
    <div id="wrap" :style="{backgroundColor: bgc}" @click="change_c"></div>
    <span>{{ count }}</span>
</div>
</body>
<script src="vue/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            bgc:'blank',
            count:0,
            colorArr:['pink','green','cyan']
        },
        methods:{
            change_c(){
                let n = this.count++;
                this.bgc = this.colorArr[n % this.colorArr.length]
            }
        }
    })
</script>
</html>

技术图片

1216 Vue基础

标签：web项目   methods   样式   列表   替换   vue   v-on   sage   拼接   

原文地址：https://www.cnblogs.com/fwzzz/p/12052036.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！