vue框架：框架简介，基础实例成员，基础指令，js对象方法补充

Posted 2021-03-10 godlover

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue框架：框架简介，基础实例成员，基础指令，js对象方法补充相关的知识，希望对你有一定的参考价值。

1.指令

2.实例成员

3.组件

4.项目开发

1)定义：javascript渐进式框架

? 渐进式：可以控制一个页面的一个标签，也可以控制一系列的标签，也可以控制整个页面，甚至可以控制整个前台项目

2）优势：

? 有指令（分支结构，循环结构...）复用页面结构等

? 有实例成员（过滤器，监听），可以对渲染的数据进行二次格式化

? 有组件（模板的复用或组合），快速搭建页面

? 虚拟dom：所有文件加载到内存中

? 数据的双向绑定

? 单页面应用

? 数据驱动

3）为什么学习vue：

? 前台框架：Angular 庞大（facebook），React 移动端（gethub），vue 吸取前两者的优势，轻量级

? vue文档是中文

? 实现前后台分离开发，节约开发成本

ps：前后端分离与前后端不分离的区别

前后端分离：

? 后端只需要返回前端需要的数据即可，不再控制前端显示的效果，耦合度相对较低

? 优点：开发效率高，用户体验好缺点：成本高，不利于SEO优化

前后端不分离：

? 前端页面看到的效果都是由后端控制的，由后端渲染页面或者重定向到其他页面，也就是后端需要控制前端的显示，这会导致前后端的耦合度很高

? 优点：节省资源，利于SEO优化缺点：不利于维护，用户体验差

4）如何使用vue

? 简单使用

vue环境导入

<!--    cdn导入-->
    <script src="https://cn.vuejs.org/js/vue.js"></script>
<!--    本地导入-->
    <script src="js/vue.js"></script>

挂载点：

? el：挂载点

? 1）一个挂载点只能控制一个页面结构（优先匹配到的结构）

? 2）挂载点挂在的页面标签严格简易用id属性进行匹配（一般习惯用app）

? 3）html标签与body标签不能作为挂载点

? 4）是否接收vue对象，是外界是否要有vue对象决定的app里面的东西，用app.$data.num

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

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

插值表达式：

? 1）空插值表达式：{{ }}

? 2）插值表达式中渲染的变量在data中可以初始化

? 3）插值表达式可以进行简单的运算和简单逻辑

? 4）插值表达式符号冲突解决，用delimiters自定义解决

<div id='app'>
    <p>
        {{}}
    </p>
    <p>
        {{num+10}}
    </p>
    <p>
        {{msg + num}}
    </p>
    <p>
        [{ num }]
    </p>
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            num:10,
            msg:'message',
        },
        delimiters:['[{','}]'],
    })
</script>

过滤器filters：

? 1）用实例成员filters来定义过滤器

? 2）在页面结构中，用 | 来表示使用过滤器

? 3）过滤方法的返回值就是过滤器过滤后的结果

? 4）过滤器可以对1-n个对象进行过滤，同时还可以传入辅助的变量，过滤器方法接收参数是按照传入的位置先后

<body>
    <div>
        <!-- 简单使用：过滤的对象会作为参数传给过滤器 -->
        <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>
    new Vue({
        el:'#app',
        data:{
            num:10,
            n1:66,
            n2:88
        },
        filters:{
            add:function (a,b){
                return a+b
            },
            jump:function(a,b){
                return a*b
            },
            fn: function(a,b,c,d){
                return a+b+c+d
            }
        }
        
    })
</script>

文本指令：

? 1）v-* 是vue指令，会被vue解析，v-text="num"中的num是变量（指令是有限的）

? 2）v-text是原样输出渲染内容，渲染控制的标签自身的内容会被替换掉

<p v-text="num">123</p>         123会被num替换掉

? 3）v-html可以解析渲染html语法的内容

? js中的基本数据类型：字符串，数字，布尔，undefined

这些类型可以直接展示

<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>

js对象补充：

var dic_obj = {

? 属性：值（数值，函数）

}

1) js没有字典类型，只有对象类型，对象可以完全替代字典来使用

2) js中对象的属性名，都采用字符串类型，所以就可以省略字符串的引号标识

3）对象中属性值为函数时，称之为对象的方法，方法建议简写：

方法名（）｛

｝

4）如果对象的属性值是一个变量，且变量名与属性名相同，还可以简写{属性,}

var height = 180;
var p = {
    height,
    name: 'Jerry',
    eat(){
    }
};
console.log(p.name,p.height)

5） js中声明类的方法

? 第一种：

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('Myself');
t1.eat();

6)类属性：
给类属性赋值，所有的对象都能访问

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的函数补充

? 1）函数的形参与调用时传入的实参关系（你传你的，我接收我的）

? 传入和接收的参数个数不需要一致

? 但是一定按位进行赋值（没有关键字参数）

? 没有接收的实参会被遗弃，没有被赋值的形参为undefined

? 2）函数定义的演变

类似匿名函数
let fn2 = function (a,b){
    return a+b;
}

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

没有函数体，只有返回值的函数，可以省略作用域｛｝，由于只要返回值，所以return 也可以省略
let fn4 = (a,b) => a+b;

没有参数时
let fn4 = ( ) => a+b;

如果形参只有一个时，声明参数的（）也可以省略
let fn5 = num => num*num

弱语言
console.log(10 + '5')   '105'
console.log(10 - '5')   5
先优先进行字符串运算，不行再数值运算
console.log(+'55555')   55555

数据驱动：

? 对比dom驱动：1.js选择器获取目标 2.为目标标签绑定事件 3.在事件中完成相应逻辑

? 1）操作是一个功能，使用需要一个方法来控制

? 2）方法名是变量，所以控制变量就可以控制该方法

事件指令：

? 1) 在实例成员methods中声明事件方法

? 2）标签通过事件指令绑定声明的方法：v-on: 事件名=“事件方法名”

 eg: <button v-on:click="btnClick">按钮</button>

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

 eg: <button v-on:click="btnClick()">按钮</button>

不传任何参数:

eg: <button v-on:click="btnClick($event)">按钮</button>  传入事件对象，同不写()

案列：

<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>

以上是关于vue框架：框架简介，基础实例成员，基础指令，js对象方法补充的主要内容，如果未能解决你的问题，请参考以下文章

Vue框架简介，实例成员，事件，过滤器，文本事件和属性指令

1216 Vue基础

vue.js基础知识篇:简介数据绑定指令计算属性表单控件绑定和过滤器

Vue框架基础

Vue.js 基础指令实例讲解（各种数据绑定表单渲染大总结）——新手入门高手进阶

web框架之Vue渐进式框架-安装入门简介(python3入门)