vue1

Z时代
2024-01-10
分类：综合

vue

vue
- vue框架优势
- 页面引入
  - 总结
  - vue实例内部的参数
  - 声明的实例是否用一个变量接收
- 插值表达式
- 文本指令
- 方法指令
  - JS中var、let、const、不写的区别
  - function、箭头函数、方法的区别
- vue事件指令
- 属性指令

vue框架优势

''' 前台框架： angular（采用typescript，基于js的语言）、react（移动端开发）、vue（PC端、移动端开发） vue ：继承了前两大框架的优点、摒弃了前两大框架的缺点，没有前两个框架健全、vue优点：中文API、单页面应用、组件化开发、数据双向绑定、虚拟DOM、数据驱动思想（操作变量，）（相比于DOM驱动（找到数据中的某一个点）） '''

页面引入

1）通过script标签引入vue.js环境

<script src="js/vue.js"></script>

2）创建vue实例

let app = new Vue()

3）通过el进行挂载

<script src="js/vue.js"></script>
<script>
    `
    console.log(Vue);
    let app = new Vue({
        el: '#d1',  // 挂载点：vue实例与页面标签建立关联
    });
    new Vue({
        el: '.d2',  // 挂载点采用的是css3选择器语法，但是只能匹配第一次检索到的结果
    });

总结

通常挂载点都选用id选择器（唯一性）

html与body标签不能作为挂载点，可以选择一个div最为挂载点。

挂载点采用的是css3选择器语法，但是只能匹配第一次检索到，如上面的代码只能挂载d1

vue实例内部的参数

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

el:挂载点

data：{ }为挂载点内部提供数据

method对象的方法，里面可以是function、箭头函数

声明的实例是否用一个变量接收

在实例内部不需要，用this就代表当前vue实例本身

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

插值表达式

<body>
    <div >
        <p>{{ msg }}</p>
        <p>{{ num * 10 }}</p>
        <p>{{ msg + num }}</p>
        <p>{{ msg[1] }}</p>
        <p>{{ msg.split('') }}</p>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            msg: 'msg',
            num: 10
        }
    })
</script>

文本指令

文本指令：{{ }} | v-text | v-html | v-once

<body>
    <div >
        <!--
            文本指令：
            1、{{ }}
            2、v-text：不能解析html语法的文本，会原样输出
            3、v-html：能解析带有html语法的文本
            4、v-once：处理的标签的内容只能被解析一次
        -->
        <p>{{ msg.split('') }}</p>
        <p v-text="msg.split('')">12345</p>
        <p v-text="info"></p>
        <p v-html="info"></p>
        <hr>
        <p v-on:click="pClick" v-once>{{ msg + info }}</p>
        <p>{{ msg }}</p>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            msg: 'message',
            info: '<i>info</i>'
        },
        methods: {
            pClick: function () {
                this.msg = '信息'
            }
        }
    })
</script>

方法指令

v-on:事件="变量" 、 @事件="变量" 、@事件="变量()" 、 @事件="变量($event, ...)"

<body>
    <h1>面向对象js</h1>
</body>
<script>
    // 数据类型：undefined、null、string、number、boolean、object(Array)、function
    //定义变量的方法 var、let、const、不写
    // object(Array)、function
    function f1() {
        console.log('f1 run')
    }
    f1();
    // 构造函数 == 类
    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');
</script>

JS中var、let、const、不写的区别

在javascript中有三种声明变量的方式：不写、var、let、const。

不写默认是全局变量

var 声明全局变量，换句话理解就是，声明在for循环中的变量，跳出for循环同样可以使用。

声明在for循环内部的sum，跳出for循环一样可以使用，不会报错正常弹出结果

let：声明块级变量，出了相应的块标签就无法获取到变量值，且不能重复定义。

在上面的例子中，跳出for循环，再使用sum变量就会报错，有着严格的作用域，变量只作用域当前隶属的代码块，不可重复定义同一个变量，不可在声明之前调用，必须先定义再使用，会报错，循环体中可以用let

注意：必须声明'use strict';后才能使用let声明变量否则浏览并不能显示结果,

const：用于声明常量，也具有块级作用域，也可声明块级。

const PI=3.14;

它和let一样，也不能重复定义同一个变量，const一旦定义，无法修改

<body>
    <h1>测试</h1>
</body>
<script>
    // ES5 ES6
    function f() {
        d = 40; // 全局变量
    }
    f();
    console.log(d);
    const c = 30;  // 常量
    console.log(c);
    if (1) {
        var a = 10;
        let b = 20;  // let、const定义的变量不能重复定义，且具备块级作用域
    }
    console.log(a);
    // console.log(b);
    for (let i = 0; i < 5; i++) {
        console.log(i);
    }
    // console.log(i);
    // console.log(i);
    // console.log(i);

function、箭头函数、方法的区别

箭头函数使用的方式

	//没有经过简化的箭头函数
	let f3 = () => {
        console.log('f3 run');
    };
    f3();
    // 如果箭头函数没有函数体，只有返回值
    let f4 = (n1, n2) =>  n1 + n2;
    let res = f4(10, 25);
    console.log(res);
    // 如果箭头函数参数列表只有一个，可以省略()
    let f5 = num => num * 10;
    res = f5(10);
    console.log(res);

function、箭头函数的区别
作用域：
箭头函数指向其定义环境，箭头函数内部的this的指向无法通过其他方式改变，指向的是外部的this，在箭头函数中调用 this 时，仅仅是简单的沿着作用域链向上寻找，找到最近的一个 this 拿来使用。
function指向其直接调用者，function内部的this就是调用者本身。
构造函数：箭头函数不能当做构造函数
参数问题：箭头函数不存在arguments对象，用rest参数代替；
原型问题：箭头函数不存在原型；
箭头函数不能使用yield命令，因此箭头函数不能用作genertor函数。
变量和定义提升：
箭头函数定义函数的时候，需要var(let、const）关键字；let和const不存在变量提升，而var虽然有变量提升却不存在定义上的提升；
function存在变量和定义的提升。

方法：定义在vue类内部的methods内的箭头函数、function、方法，function可以作为类，内部会有this，箭头函数内部没有this，{}里面出现的函数称之为方法：方法名(){}。

  let obj = {
        name: 'Jerry',
      //function定义方法
        eat: function (food) {
             console.log(this);//指向实例化的对象
             console.log(this.name + '在吃' + food)
         },//{name: "Jerry", eat: ƒ}
      //箭头函数定义方法
         eat: food => {
             console.log(this);//这里的this指向的window，箭头函数内部没有this，无法指向当前对象，只能向外找找到了window。
             console.log(this.name + '在' + food)
             `Window {parent: Window, opener: null, top: Window, length: 0, frames: Window,...}`
         },
      //普通方法的定义
        eat(food) {  // 方法的语法
            console.log(this);//方法内有this，它的this指向该方法调用时实例化出的对象
            console.log(this.name + '在' + food)
            //{name: "Jerry", eat: ƒ}
        }
    };

vue事件指令

事件指令的使用方式：v-on:事件名="方法变量"，简写：@事件名="方法变量"，方法变量必须是已经在method内部定义的方法。事件变量，不添加()，默认会传事件对象: $event ；添加()，代表要自定义传参，系统不再传入事件对象，但是可以手动传入事件对象$event。

说明：这里的事件名就是事件，后面的方法变量是当事件触发时执行的事情，和JS里的function一样。

<body>
    <div >
        //事件指令的使用方式
        <!--
        事件指令：v-on:事件名="方法变量"
        简写：  @事件名="方法变量"
        -->
        <p v-on:click="f1">{{ msg }}</p>
        <p @click="f1">{{ msg }}</p>
        <hr>
        <!--mouseover mouseenter  |  mouseout mouseleave-->
        <p @mouseover="f2" @mouseout="f3" @mouseup="f5" @mousemove="f6" @contextmenu="f7">{{ action }}</p>
        <hr>
        <!-- 事件变量，不添加()，默认会传事件对象: $event -->
        <!-- 事件变量，添加()，代表要自定义传参，系统不再传入事件对象，但是可以手动传入事件对象 -->
        <p @click="f8($event, '第一个')">{{ info }}</p>
        <p @click="f8($event, '第二个')">{{ info }}</p>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            msg: '点击切换',
            action: '鼠标事件',
            info: '确定点击者'
        },
        methods: {
            f1 () {
                this.msg = '点击了'
            },
            f2 () {
                this.action = '悬浮';
                console.log('悬浮')
            },
            f3 () {
                this.action = '离开'
            },
            f4 () {
                this.action = '按下'
            },
            f5 () {
                this.action = '抬起'
            },
            f6 () {
                this.action = '移动';
                console.log('移动')
            },
            f7 () {
                this.action = '右键';
            },
            f8 (ev, argv) {
                console.log(ev, argv);
                this.info = argv + '点击了';
            }
        }
    })
</script>

属性指令

v-bind:属性="变量" 简写 :属性="变量"

:title="t1"
:class="c1"  |  :class="[c1, c2]"  |   :class="{c1: true}"
//三种使添加class属性的方式，第三种可以通过控制true和false来控制该class属性是否生效
:style="s1"  |  :style="{color: c1, fontSize: f1}"
//s1是字典变量，c1和f1变量分别控制字体颜色和大小

   <div >
        <!--属性指令：   v-bind:属性名="变量"
            简写：       :属性名="变量"
        -->
        <p style="color: red" class="dd1" abc="def" title="悬浮提示">红色字体</p>
        <!--1、简单使用-->
        <p v-bind:title="pTitle" :abc="def" @click="changeImg">简单使用</p>
        <!--<img :src="img_src" alt="">-->
        <!--2、class属性绑定-->
        <!--c1变量的值就是类名-->
        <p :class="c1"></p>
        <!--多类名可以用[]语法，采用多个变量来控制-->
        <p :class="[c2, c3]"></p>
        <!--选择器位可以设置为变量，也可以设置为常量-->
        <p :class="['d1', c4]"></p>
        <!--{类名: 布尔值}控制某类名是否起作用-->
        <!--<p :class="{x1: false}"></p>-->
        <!--多种语法混用-->
        <p :class="['d1', {d2: is_true}]" @click="is_true = !is_true"></p>
        <!--3、style属性绑定(了解)-->
        <p :style="myStyle">样式属性</p>
        <p :style="{width: w,height: h, backgroundColor: bgc}">样式属性</p>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            pTitle: '简单使用',
            def: '自定义属性',
            img_src: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3819296004,574391848&fm=26&gp=0.jpg',
            c1: 'd1 d2',
            c2: 'd1',
            c3: 'd3',
            c4: 'd3',
            is_true: true,
            myStyle: {
                width: '100px',
                height: '100px',
                backgroundColor: 'red'
            },
            w: '200px',
            h: '100px',
            bgc: 'green'
        },
        methods: {
            changeImg() {
                this.img_src = 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1371195756,4187769521&fm=26&gp=0.jpg'
            }
        }
    })

以上是 vue1 的全部内容，来源链接： utcz.com/z/378309.html