Vue框架基础

Vue框架基础

1、什么是vue框架

渐进式的JavaScript框架

渐进式:可以控制一个页面的标签,也可以控制一系列标签,也可以控制整个页面,甚至可以控制整个前端项目

2、vue有什么优势

通俗来讲:

  1. 有指令(分支结构,循环结构...),复用页面结构等
  2. 有实例成员(过滤器,监听),可以对渲染的数据做二次格式化
  3. 有组件(模块的复用与组合),快速搭建页面

官方说法:

  1. 虚拟DOM,直接加载的到内存中,加载速度更快
  2. 数据的双向绑定
  3. 单页面应用
  4. 数据驱动

3、为什么要学vue

前端框架主要有三种:Angular(庞大),React(精通移动端),vue(吸取前两者的优势,轻量级的)

还有vue是中国人开发的,一手文档是中文的

一般现在很多都实现前后端分离开发,为了节约开发成本

4、如果使用vue

vue环境简单搭建

一般将导入和写vue代码都写在HTML中的/body>与</html 中间

两种方式:1、CDN导入,2、本地导入

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

5、基础实例成员

1、挂载点el

  1. 一个挂载点el只能控制一个页面结构(优先匹配到的结构)
  2. 挂载点挂载的页面标签严格建议用 id 属性进行匹配(一般习惯用app),因为id唯一
  3. html标签与body标签不能作为挂载点
  4. 是否接受vue对象,是根据外界是否有vue对象内容决定的
    <body>
    <div id="app">
        <div class="d1">
    <!--        插值表达式-->
            {{ num }}
        </div>
        <div class="d1">
            {{ num }}
        </div>
    </div>
    <div id="main">{{ n }}</div>
    </body>
    <!--cdn导入-->
    <!--<script src="https://cn.vuejs.org/js/vue.js"></script>-->
    <!--本地导入-->
    <script src="js/vue.js"></script>
    <script>
        // 声明变量app = vue对象
        var app = new Vue({
            // 挂载点el,只能控制一个页面结构,顾用id
            el: ‘#app‘,
            // 在body中写的插值表达式中的变量在data中初始化
            data: {
                num: 100
            }
        });
        // 是否接受vue对象,是根据外界是否有vue对象的内容决定
        new Vue({
            el: ‘#main‘,
            data:{
                n:app.num
            }
        });
    
        // 打印挂载点中所有的内容,即div>app所有渲染过的代码
        console.log(app.$el);
        console.log(app.num); // 100
        console.log(app.$data.num) // 100
    ?
    </script>

2、插值表达式

  1. 空插值表达式:{{ }}
  2. 插值表达式中渲染的变量在data中可以初始化
  3. 插值表达式中可以进行简单的运算与逻辑
  4. 当插值表达式与Django模板语法冲突时,可以使用delimiters自定义
<body>
<div id="app">
?
<p>{{ msg }}</p>
<p>{{  }}</p>
<p>{{ num }}</p>
<p>{{ num + 10 }}</p>
<!--    可以使用字符串的方法-->
<p>{{ msg.length + num }}</p>
<!--    索引4的值-->
<p>{{ msg[4] }}</p>
<!--    按照空格切分后是列表-->
<p>{{ msg.split(‘‘) }}</p>
<!--    更换插值表达式标识符-->
<p>[{ msg }]</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: ‘#app‘,
        data: {
            msg: ‘message‘,
            num: 10
        },
        // 更换插值表达式标识符
        delimiters: [‘[{ ‘, ‘ }]‘]
    })
</script>

3、过滤器

  1. 用实例成员filters来定义过滤器
  2. 在页面结构中,用 | 来标识使用过滤器
  3. 必须要有一个返回值,过滤方法的返回值就是过滤器过滤后的结果
  4. 过滤器可以对1~n个变量进行过滤,同时可以传入辅助的变量,过滤器接收参数是按照传入的位置先后
<body>
<div id="app">
<!--    简单使用: 过滤器对象作为第一个参数传给过滤器,过滤器可以传入辅助的参数-->
    <p>{{ num|add(20) }}</p>
<!--    串联使用:将第一个过滤器结果当做第一个参数传入第二个过滤器中-->
    <p>{{num|add(10) | jump(2) }}</p>
<!--    过滤器方法接收的参数按照传入的位置先后传入-->
    <p>{{ n1, n2 | fn(100, 200) }}</p>
    <p>{{n1, n2 | fn(10, 20), n1, n2 | fn(100) }}</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: ‘#app‘,
        data:{
            num: 10,
            n1: 20,
            n2: 30
        },
        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>

6、基础指令

1、文本指令

  1. v-* 是vue指令,会被vue解析,v-text="num"中的num是变量
  2. v-text是原样输出渲染内容,渲染控制的标签自身内容会被替换掉(<p v-text="num">123</p>中的123会被num替换)
  3. v-html可以解析渲染HTML语法的内容
  4. js基本数据类型:字符串,数字,布尔,undefined
    <body>
    <div id="app">
        <p>{{ num | add(300) }}</p>
        <p v-text="num"></p>
    <!--    渲染控制的标签自身内容123会被替换-->
        <p v-text="num">123</p>
    <!--    v-text原样渲染,v-html会解析HTML语法-->
        <p v-text="info"></p>
        <p v-html="info"></p>
    <!--    js基本数据类型:字符串,布尔,数字,undefined-->
    <!--    插值表达式中引号是字符串,不写代表变量-->
        <p>{{ ‘abc‘ + 10 + num }}</p>
    <!--    文本指令中字符串需要写在引号中再加引号-->
        <p v-text=" ‘abc‘ + 10 + num "></p>
    </div>
    </body>
    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el: ‘#app‘,
            data: {
                num: 100,
                info: ‘<i style="color: red">info</i>‘,
            },
            filter:{
                add: function (a, b) {
                    return a+b;
                }
            }
    ?
        })
    </script>

2、事件指令

1、DOM驱动

  1. js选择器获取目标标签
  2. 为目标标签绑定事件
  3. 在事件中完成相应的逻辑
        var btn = document.getElementsByTagName(‘button‘)[0];
        btn.onclick = function () {
            console.log(111111111111);
         };

2、数据驱动

  1. 操作一个功能,使用需要一个方法来看控制
  2. 方法名是变量,所以控制变量就可以控制方法

3、事件指令

  1. 在实例成员methods中声明事件方法
  2. 标签通过事件指令绑定声明的办法:v-on:事件名="事件方法名"
    <button v-on:click="btnClick">按钮</button>
  3. 标签通过事件指令绑定声明的方法,且可以自定义传参数:v-on:事件名="事件方法名( )"
    <button v-on:click="btnClick()">按钮</button>  不传任何参数
    <button v-on:click="btnClick($event)">按钮</button>  传入事件对象,跟不写括号相同
    <button v-on:click="btnClick(10)">按钮</button>  只传入自定义参数,当然也可以传入事件对象加自定义参数
<body>
<div id="app">
<!--    标签中声明绑定的方法,不加括号-->
    <button v-on:click="btnClick">{{ btn1 }}</button>
    <hr>
<!--    直接绑定事件名:系统会触发事件时调用事件方法,传给事件方法的一个参数(事件对象)-->
    <button v-on:click="fn1">{{ btn3 }}</button>
<!--    绑定的事件后跟着(),不是主动调用事件方法,而是表示在触发事件调用时,传入的参数全由用户自己决定-->
    <button v-on:click="fn2($event, 10, 20)">{{ btn4 }}</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>
?
    new Vue({
        el: ‘#app‘,
        data:{
            btn1: ‘按钮1‘,
            btn2: ‘按钮2‘,
            btn3: ‘按钮3‘,
            btn4: ‘按钮4‘,
        },
        methods: {
            btnClick() {
                console.log(666)
            },
            fn1(ev) {
                console.log(ev.clientX, ev.clientY)
            },
            fn2(ev, n1 ,n2) {
                console.log(ev.clientX, ev.clientY)
            },
            fn(msg) {
                console.log(msg)
            }
        }
?
    })
</script>

7、js对象补充

1、普通对象与对象简写

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

     // 对象属性替代python中字典类型
        var dic_obj = {
            ‘name‘: ‘Bob‘,
            ‘eat‘: function () {
                console.log(‘在吃饭‘)
            }
        };
        // 可以直接利用对象.的方式取值或者字典取值方式取值
        console.log(dic_obj.name, dic_obj[‘name‘]);
        dic_obj.eat();
        // 得到函数地址加括号调用
        dic_obj[‘eat‘]()
  2. js中对象的属性名,都采用字符串类型,所以可以省略字符串的引号标识
        
     // 属性可以省略引号
        var dic_obj2 = {
            name: ‘Tom‘,
            ‘eat‘: function () {
                console.log(‘在吃饭...‘)
            }
        };
        // 可以直接利用对象.的方式取值或者字典取值方式取值
        console.log(dic_obj.name, dic_obj[‘name‘]);
        dic_obj.eat();
        // 得到函数地址加括号调用
        dic_obj[‘eat‘]()
  3. 对象中属性值为函数时,称之为方法,方法建议简写:方法名(){ }
  4. 如果对象中的属性值是一个变量,且变量名与属性名相同,还可以简写:{属性,}
     var height = 180;
        var p={
            // 上面定义了就直接简写
            height,
            // 省略引号
            name: ‘Tank‘,
            // 对象中属性为函数时,方法简写
            eat(){}
        };
        console.log(p.height, p.name)

2、第一种类(了解)

 // 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();

3、第二种类(了解)

在函数内部出现了this语法,这个函数就是类,否则就是普通函数

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

4、类属性

// 类属性:给类属性赋值,所有对象都能访问
function Fn() {}
let f1 = new Fn();
let f2 = new Fn();
?
// 赋值类属性
Fn.prototype.num = 100;
?
console.log(f1.num);
console.log(f2.num);
?
// 类似于单例(给类Vue加属性num)
Vue.prototype.num = 1000;
let v1 = new Vue();
let v2 = new Vue();
console.log(v1.num);
console.log(v2.num);

8、js函数补充

1、函数的形参与调用时传入的实参关系

  1. 传入和接收的参数个数不需要一致
  2. 但是要按照位置顺序赋值,没有关键字参数
  3. 没有赋值的形参会被赋值undefined,没有传入的实参会被遗弃
  function fn1(a,b) {
     console.log(a, b); // 1 2
     return a+b;
    }
    // 传多了3会被遗弃
    let res = fn1(1, 2, 3);
    console.log(res); // 3
    // 传少了形参未被传的被赋值undefined
    let p = fn1(1);
    console.log(p) // NaN 因为a=1, b=undefind相加不是数字

2、函数定义的演变

    // 定义函数(类似于匿名函数,起名字)
    let fn2 = function (a, b) {
        return a+b;
    };
    // 省略关键字的箭头函数
    let fn3 = (a, b) => {
        return a+b;
    };
    // 没有函数体,只有返回值的函数可以省略作用域{},return也可以省略
    let fn4 = (a, b) => a+b;

    // 如果形参只有一个时,()也可以省略
    let fn5 = num => num*num  

3、js是弱语言

    // 加法变字符串
    console.log(10 + ‘5‘); // 105
    // 减法变数字
    console.log(10 - ‘5‘); // 5
    // 将存数字字符串变数字前面加一个+
    console.log(+‘55555‘); // 55555

原文地址:https://www.cnblogs.com/Mr-shen/p/12297338.html

时间: 2024-10-07 09:51:11

Vue框架基础的相关文章

Vue 框架基础知识(一)

一.Vue是什么? a:vue是一套用于构建用户界面的渐进式框架 . b:vue的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合 . c:使用vue将helloworld渲染到页面 : 二.指令 : (1)概念 :本质就是自定义属性 :Vue都是以 v- 开头 : a:v-cloak ,防止页面加载时出现闪烁问题 : b:v-text ,用于将数据填充到标签中 ,作用于插值表达式类似 ,但是没有闪烁问题 : 如果数据中有HTML标签会将html标签一并输出 . 注意 :此处为单

理解vue实现原理,实现一个简单的Vue框架

参考: 剖析Vue实现原理 - 如何实现双向绑定mvvm Vue.js源码(1):Hello World的背后 Vue.js官方工程 本文所有代码可以在git上找到. 其实对JS我研究不是太深,用过很多次,但只是实现功能就算了.最近JS实在是太火,从前端到后端,应用越来越广泛,各种框架层出不穷,忍不住也想赶一下潮流. Vue是近年出的一个前端构建数据驱动的web界面的库,主要的特色是响应式的数据绑定,区别于以往的命令式用法.也就是在var a=1;的过程中,拦截'='的过程,从而实现更新数据,w

Vue 框架-08-基础实战 demo

Vue 框架-08-基础实战 demo 前面介绍了有 7 篇了,都是小实例,没有相对完整的应用,虽然有些功能挺实用,但还是有的不常用的,今天记录一篇关于前几篇基础内容的实战 demo,也是对 Vue 基础的简单应用. 来看截图: 源代码 html 文件: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>VueLearn-cnblogs/xpwi<

怎么能学好Web前端开发 如何快速掌握Vue框架

怎么能学好Web前端开发?如何快速掌握Vue框架?很多人看好Web前端的市场前景,因此纷纷选择学习入行前端行业?.很多学Web前端的小伙伴在进阶阶段都要学习Vue,因为它是目前企业常用的技术之一.下面给大家分享一个比较不错的Vue学习路线. Vue是一个用于构建Web用户界面的JavaScript框架,因此在开始使用Vue之前,你至少先要掌握JavaScript和Web开发的基础知识.具备一定基础后,你可以了解以下内容: Vue生命周期.在构建你的第一个Vue应用之前,你要了解如何在网页中去安装

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

目录 Vue框架简介,实例成员,事件,过滤器,文本.事件和属性指令 什么是Vue 为什么要学Vue 如何使用Vue Vue实例成员 1.el: 实例 2.data: 数据 3.methods: 方法 Vue事件 面向对象js Vue过滤器 Vue指令 文本指令 事件指令 属性指令 Vue框架简介,实例成员,事件,过滤器,文本.事件和属性指令 什么是Vue vue框架:渐进式JavaScript框架 ? vue一个环境:可以只控制页面中一个标签,可以控制一组标签,可以控制整个页面,可以控制整个项目

Vue.js 基础部分

### Vue.js 基础部分 ## 一. Vue.js 简介 ### 1. Vue.js 是什么 **Vue.js**也称为 Vue,读音/vju:/,类似 view,错误读音 v-u-e 版本: v2.6 - 是一个构建用户界面的框架 - 是一个轻量级 MVVM(Model-View-ViewModel)框架,和 angular.react 类似,其实就是所谓的数据双向绑定 - 数据驱动+组件化的前端开发(核心思想) - 通过简单的 API 实现**响应式的数据绑定**和**组合的视图组件*

前端Vue框架 01

1.前言:路飞项目所有知识点概况(了解) Vue框架:前台界面,页面逻辑 1)指令 2)实例成员 3)组件 4)项目开发 DRF框架:数据(接口) 1)基础的模块:请求.响应.解析.渲染 2)序列化.三大认证 3)过滤.搜索.排序.分页 4)异常.第三方jwt.restful接口规范 Luffy项目:前后台分离项目 1)项目的登录认证.课程商机销售.项目完成 2)短信.支付宝.服务器.上线.redis.celery.git 2.Vue框架介绍 1)定义:javascript渐进式框架 渐进式:可

框架基础:关于ajax设计方案(三)---集成ajax上传技术

之前发布了ajax的通用解决方案,核心的ajax发布请求,以及集成了轮询.这次去外国网站逛逛,然后发现了ajax level2的上传文件,所以就有了把ajax的上传文件集成进去的想法,ajax方案的level2的改进就不介绍了,不清楚的可到前几篇博客去看看.我们直接切入主题. 概念介绍: 1. js的FormData:js中在新的版本中已经支持了FormData对象,可以初始化一个空的form,或者初始化已经存在的form,浏览器测试代码. 2. 浏览器的支持:浏览器已支持input=file的

框架基础:ajax设计方案(三)---集成ajax上传技术

之前发布了ajax的通用解决方案,核心的ajax发布请求,以及集成了轮询.这次去外国网站逛逛,然后发现了ajax level2的上传文件,所以就有了把ajax的上传文件集成进去的想法,ajax方案的level2的改进就不介绍了,不清楚的可到前几篇博客去看看.我们直接切入主题. 概念介绍: 1. js的FormData:js中在新的版本中已经支持了FormData对象,可以初始化一个空的form,或者初始化已经存在的form,浏览器测试代码. 2. 浏览器的支持:浏览器已支持input=file的