Vue框架基础

时间：2020-02-11 21:30:41 阅读：68 评论：0 收藏：0 [点我收藏+]

Vue框架——环境搭建、挂载点（el）插值表达式、过滤器、文本指令、事件指令

Vue框架

什么是Vue框架？

渐进式JavaScript框架

什么是渐进式？

通过对框架的了解与运用程度，来决定其在整个项目中的应用范围，最终可以独立以框架方式完成整个web前端项目
也就是说：可以控制一个页面的一个标签，也可以控制一系列标签，也可以控制整个页面，甚至可以控制整个前台项目

Vue框架的优势

组件化：模块的服用或组合，可以快速搭建页面
有指令：分支结构，循环结构，复用页面结构等
有实例成员：（过滤器，监听...）可以对渲染的数据二次格式化
轻量级框架：Angular（庞大）、React（精通移动端）、Vue（吸取前两者优势，轻量级）
虚拟DOM：把在文件中写的所有页面结构，页面样式，页面逻辑加载到内存中
数据的双向绑定：全局监听的方式

Vue框架环境搭建：通过script标签导入vue文件即可

1）cdn
<script src="https://cn.vuejs.org/js/vue.js"></script>

2）本地导入
<script src="js/vue.js"></script>

挂载点（el）

一个挂载点只能控制一个页面结构（优先匹配到的结构）
挂载点挂载的页面标签严格建议用id属性进行匹配（一般习惯用app）
html标签与body标签不能作为挂载点（html和body标签不可以被替换，组件中详细介绍）
是否接受vue对象，是外界是否要只有vue对象的内容决定的

eg:

<div id="app">
    <div class="d1">
        {{ num }}
    </div>
    <div class="d1">
        {{ num }}
    </div>
</div>
<div id="main">
    {{ n }}
</div>

<script>
 var app = new Vue({
     el: '#app',
     data: {
         num: 100
     }
 });
 console.log(app.$data.num, app.num);
 new Vue({
     el: '#main',
     data: {
         n: app.num
     }
 });
</script>

插值表达式

空插值表达式：{{ }}
插值表达式中渲染的变量在data中可以初始化
插值表达式可以进行简单运算与简单逻辑
插值表达式符合冲突解决，用delimiters自定义（了解）

eg:

<div id="app">
    <p>{{ info }}</p>
    <p>{{ msg }}</p>
    <p>{{ }}</p>
    <p>{{num}}</p>
    <p>{{num + 10 * 2}}</p>
    <p>{{ msg.length + num }}</p>
    <p>{{ msg[4] }}</p>
    <p>{{ msg.split('')[4] }}</p>
    <p>[{ num }]</p>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            info: '信息',
            msg: 'message',
            num: 10,
        },
        // 控制vue插值表达式符合
        delimiters: ['[{', '}]'],
    })
</script>

过滤器

用实例成员filters来定义过滤器
在页面结构中，用 | 来标识使用过滤器
过滤方法的返回值就是过滤器过滤后的结果
过滤器可以对1~n个变量进行过滤，同时还可以传入辅助的变量，过滤器方法接受参数是安装传入的位置先后

eg:

<body>
    <div id="app">
        <!-- 简单使用：过滤的对象会作为参数传给过滤器 -->
        <p>{{ num | add(20) }}</p>
        <!-- 串联使用：将第一个过滤器结果作为参数给第二个过滤器 -->
        <p>{{ num | add(100) | jump(2) }}</p>
        <!-- 究极使用 -->
        <p>{{ n1, n2 | fn(99, 77) }}</p>
        <!-- 究极大究极 -->
        <p>{{ n1, n2 | fn(99, 77), n1, n2 | fn(100) }}</p>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            num: 10,
            n1: 66,
            n2: 88
        },
        filters: {
            add: function (a, b) {
                console.log(a, b);
                return a + b;
            },
            jump: function (a, b) {
                return a * b
            },
            fn: function (a, b, c, d) {
                console.log(a, b, c, d);
                return a + b + c + d;
            }
        }
    })
</script>

文本指令

v-* 是vue指令，会被vue解析，v-text="num"中的num是变量（指令是有限的，不可以自定义）
v-text是原样输出渲染内容，渲染控制的标签自身内容会被替换掉（
123
会被num替换）
v-html可以解析渲染html语法的内容
v-on：
v-on:事件="方法" => 系统传参，只默认传$event
v-on:事件="方法($event, ...)" => 完全自定义传参，可以手动传入$event

<!-- js基本数据类型：字符串、数字、布尔、undefined -->
<p v-text="'abc' + num + 10"></p>
<p>{{ 'abc' + num + 10 }}</p>

eg:

<body>
    <div id="app">
        <p>{{ num | add(300) }}</p>

        <p v-text="num"></p>
        <p v-text="num">123</p>

        <p v-text="info"></p>
        <p v-html="info"></p>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            num: 100,
            info: '<i style="color: red">info内容</i>'
        },
        filters: {
            add: function (a, b) {
                return a + b;
            }
        }
    })
</script>

事件指令

一、数据驱动

操作是一个功能，使用需要一个方法来控制
方法名是变量，所以控制变量就可以控制该方法

二、事件指令

在实例成员methods中声明事件方法
标签通过事件指令绑定声明的方法： v-on:事件名="事件方法名"
- ```
<button v-on:click="btnClick">按钮</button>
```

标签通过事件指令绑定声明的方法，且自定义传参： v-on:事件名="事件方法名()"

<button v-on:click="btnClick()">按钮</button>  不传任何参数
<button v-on:click="btnClick($event)">按钮</button>  传入事件对象，同不写()
<button v-on:click="btnClick(10)">按钮</button>  只传入自定义参数，当然也可以传入事件对象

eg:

<body>
    <div id="app">
        <button v-on:click="btnClick">{{ btn1 }}</button>

        <button v-on:click="btnClick">{{ btn2 }}</button>
        <hr>

        <!-- 直接绑定事件名：系统会在触发事件时(点击时)调用事件方法(fn1)，传给事件方法一个参数(事件对象) -->
        <button v-on:click="fn1">按钮3</button>

        <!-- 绑定的事件名后跟着()，不是主动调用事件方法，而是表示在触发事件调用时，传入的参数全由用户自己决定 -->
        <button v-on:click="fn2($event, 10, 20)">按钮4</button>

        <hr>
        <button v-on:click="fn(btn1)">{{ btn1 }}</button>

        <button v-on:click="fn(btn2)">{{ btn2 }}</button>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    // 对比DOM驱动：1）js选择器获取目标标签 2）为目标标签绑定事件 3）在事件中完成相应逻辑
    // var btn = document.getElementsByTagName('button')[0];
    // btn.onclick = function () {
    //     console.log(111111111111);
    // };
    new Vue({
        el: '#app',
        data: {
            btn1: '按钮1',
            btn2: '按钮2',
        },
        methods: {
            btnClick () {
                console.log(666)
            },
            fn1 (ev) {
               console.log(ev.clientX, ev.clientY);
            },
            fn2(ev, n1, n2) {
                console.log(ev, n1, n2);
                console.log(ev.clientX, ev.clientY);
            },
            fn (msg) {
                console.log(msg);
            }
        }
    })
</script>

js对象补充

普通对象与对象简写

js没有字典类型，只有对象类型，对象可以完全替代字典来使用
js中对象的属性名，都采用字符串类型，所以就可以省略字符串的引号标识
对象中属性值为函数时，称之为方法，方法建议简写: 方法名(){}
如果对象的属性值是一个变量，且变量名与属性名相同，还可以简写：{属性,}

eg:

var dic_obj = {
    // 属性：值（数值，函数）
    'name': 'Bob',
    'eat': function () {
        console.log('在吃饭')
    }
};

console.log(dic_obj.name, dic_obj['name']);
dic_obj.eat(); dic_obj['eat']();

// 属性省略引号，方法简写
var obj = {
    name: 'Tom',
    eat () {
        console.log('在吃饭...')
    }
};
console.log(obj.name, obj['name']);
obj.eat(); obj['eat']()

// 属性变量简写
var height = 180;
var p = {
    height,
    name: 'Jerry',
    eat() {}
};
console.log(p.name, p.height);

第一种类（了解）

// 第一种声明类的方法
    class People {
        constructor (name) {
            this.name = name
        }
        eat () {
            console.log(this.name + '在吃饭')
        }
    }
    let p1 = new People('Bob');
    let p2 = new People('Tom');
    console.log(p1.name, p2.name);
    p1.eat();

第二种类（了解）

// 第二种声明类的方法(难点)：在函数内部出现了this语法，该函数就是类，否则就是普通函数
function Teacher(name) {
    this.name = name;
    this.eat =function () {
        console.log(this.name + '在吃饭')
    }
}
let t1 = new Teacher('Owen');
t1.eat();

类属性

// 类属性：给类属性赋值，所有对象都能访问
function Fn() {}
let f1 = new Fn();
let f2 = new Fn();

// 赋值类属性
Fn.prototype.num = 100;

console.log(f1.num);
console.log(f2.num);

// 类似于单例
Vue.prototype.num = 1000;
let v1 = new Vue();
let v2 = new Vue();
console.log(v1.num);
console.log(v2.num);

js函数补充

? 函数的形参与调用时传入的实参关系（你传你的，我收我的），传入和接受的参数个数不需要一致但是一定按位进行赋值（没有关键字参数），没有接收的实参会被遗弃，没有被赋值的形参会被赋值为undefined

function fn1(a, b) {
    console.log(a, b);
    return a + b;
}

let res = fn1(10, 20, 30);
console.log(res);

// 2）函数定义的演变
let fn2 = function (a, b) {
    return a + b;
};

// 省略关键字的箭头函数
let fn3 = (a, b) => {
    return a + b;
};

// 没有函数体，只有返回值的函数，可以省略作用域{}，由于只有返回值，所以return也省略
let fn4 = (a, b) => a + b;
console.log(fn4(11, 22));

// 如果形参只有一个时，声明参数的()也可以省略
let fn5 = num => num * num;
console.log(fn5(3));

// 弱语言
console.log(10 + '5');
console.log(10 - '5');
console.log(+'55555');

Vue框架基础

原文：https://www.cnblogs.com/aheng/p/12296665.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)