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>