---恢复内容开始---

1、框架与库的区别

前端框架与库的区别?

  • jquery 库 -> DOM(操作DOM) + 请求

  • art-template 库 -> 模板引擎

  • 框架 = 全方位功能齐全

    • 简易的DOM体验 + 发请求 + 模板引擎 + 路由功能

  • KFC的世界里,库就是一个小套餐, 框架就是全家桶

  • 代码上的不同

    • 一般使用库的代码，是调用某个函数，我们自己把控库的代码

    • 一般使用框架，其框架在帮我们运行我们编写好的代码

      • 框架: 初始化自身的一些行为

        • 执行你所编写的代码

        • 施放一些资源

2、vue使用npm下载完成后，其文件夹下会有几个不同后缀的文件：

1)vue.common.js是以commomjs为规范的文件

2）vue.esm.browser.js则是es6为标准的commonjs文件

3）vue.esm.js 是以es6为标准的

3.vue的基本使用：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

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

    <title>Document</title>

</head>

<body>

    <div id="app">

    </div>

</body>

<script>

new Vue({

    el:'#app',//目的地

    template:'<div>{{msg}}</div>',//只允许一个根标签,没有的话默认加载app根元素

    data(){

        return{

            msg:'hello'

        }//数据驱动视图，在vue实例对象

    }

})

//插值模板语法:双花括号

</script>

</html>

花括号中允许插入对象，字符串，布尔值，三元表达式，对象要在花括号外加空格

隔开

4、指令：

在vue中提供了一些对于页面+数据更方便的输出，这些操作被称为指令

以v-xxx表示，封装了一些DOM行为

v-text/v-html:渲染相应的文本/模板内容

v-if/v-show：销毁或创建元素/隐藏或显示元素

v-if可与v-else搭配使用

v-for循环

v-for='（item,index） in menuLists' //item是值的每一项.index是数组的索引

v-bind 为元素的属性绑定值，主要实现的是单向数据绑定

:属性=‘data变量’

v-on绑定事件，简写@

v-model:双向数据绑定语法糖，但仅能在表单元素内绑定

尝试用vue内部实现：

5、局部组件

1）局部组件可以使用以下方式进行声明

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

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

    <title>Document</title>

</head>

<body>

    <div id="app">

    </div>

</body>

<script>

    //局部组件：声子，挂子，用子

    let App={//组件名称首字母必须大写

        template:'<div>entry{{msg2}}</div>',

        data(){

            return {

                msg2:'ok啦'

            }//必须使用函数返回一个对象

        }

    }

    new Vue({

        el: '#app',//目的地

        template: '<App />',//这里的标签可以是单闭合

        data() {

            return {

                msg: 'hello'

            }

        },

        components: {

            App

        }

    })

//插值模板语法:双花括号

</script>

</html>

4、全局组件

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

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

    <title>Document</title>

</head>

<body>

    <div id="app">

    </div>

</body>

<script>

    //全局组件

    Vue.component('Vbtn',{//挂载到了vue的实例上,该实例的子组件

    //也可以使用这个全局组件

        template:'<button>hello</button>'

    })

    new Vue({

        el: '#app',//目的地

        template: '<Vbtn />',//这里的标签可以是单闭合

        data() {

            return {

                msg: 'hello'

            }

        },

        components: {

            //不需要挂载Vbtn,已经挂载好了

        }

    })

//插值模板语法:双花括号

</script>

</html>

VUE重修01的更多相关文章

  1. vue学习01

    vue学习01   1. 创建一个Vue实例官网-学习-教程-安装-(开发/生产版本)-与jQuery的引用相似 <!DOCTYPE html> <html> <head ...

  2. vue 2.0-1

    vue 2.0 开发实践总结之疑难篇   续上一篇文章:vue2.0 开发实践总结之入门篇 ,如果没有看过的可以移步看一下. 本篇文章目录如下: 1.  vue 组件的说明和使用 2.  vuex在实 ...

  3. vue基础01

    事件 事件绑定 在vue中,事件绑定用v-on.v-on也可以用@click=""形式 实例1: <div class="container" id=&q ...

  4. Vue学习-01

    1.vue 学习 v-bind:title 数据绑定 v-if 判断显示或者隐藏 <div id="app-3"> <p v-if="seen" ...

  5. Vue-router重修01

    ---恢复内容开始--- 1.在vue中获取dom vue中不建议您亲自进行dom操作 vue实例内置ref属性存储或获取相应的dom元素 <div ref="dv"> ...

  6. Vue重修02

    1.v-for的优先级比v-if/v-show都大 v-bind也可以绑定自定义的属性 2.父组件向子组件传值 <!DOCTYPE html> <html lang="en ...

  7. React对比Vue（01 数据的定义，使用，组件的写法，目录结构等）

    1.脚手架对比 两个都需要安装node node自带npm 然后安装cnpm yarn(有时候 npm会丢包,所以) npm install -g cnpm --registry=https://re ...

  8. vue总结 01基础特性

    最近有时间来总结一下vue的知识: 一.vue.js 被定义成一个开发web界面的前端库,是一个非常轻量的工具.vue.js本身具有响应式和组件化的特点. 我们不需要在维护视图和数据的统一上花费大量的 ...

  9. VUE 入门 01

    什么是VUE? 它是构建用户界面的JavaScript框架(让他自动生成js.css.html) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vu ...

随机推荐

  1. openJDK之如何下载各个版本的openJDK源码

    如果我们需要阅读openJDK的源码,那么需要下载,那么该去哪下载呢? 现在JDK已经发展到版本10了,11已经处于计划中,如果需要特定版本的openJDK,它们的下载链接在哪呢? 1.openJDK ...

  2. NOI-OJ 1.7 ID:21 单词替换

    整体思路 本题如果使用scanf每次读入一个单词.比对替换后再进行输出的话就十分简单,使用这种方法必须要用数组把读入的所有单词存起来,读入的count个单词的前n-2个是原文,第n-1个是查找的单词, ...

  3. maven私库nexus2.11.4迁移升级到nexus3.12.0

    nexus简介 nexus是一个强大的maven仓库管理器,它极大的简化了本地内部仓库的维护和外部仓库的访问. nexus是一套开箱即用的系统不需要数据库,它使用文件系统加Lucene来组织数据 .n ...

  4. Django小技巧——使用package管理app

    在一个学习视频上看见的小技巧,遂记录下来. 1. 如下图所示,项目中有多个app,本技巧要解决的问题是集中管理这多个app,将其放入一个package下集中管理,改善项目的视图环境 2. 建立一个pa ...

  5. HTTP中application/x-www-form-urlencoded字符说明

    一.概述 在学习ajax的时候,如果用post请求,需要设置如下代码. ajax.setRequestHeader("content-type","application ...

  6. tomcat7的安装与maven安装

    tomcat7的安装与配置: 下载tomcat7 :wget 地址 解压:tar -zxvf 文件名 编辑tomcat目录下的conf下的server.xml文件: <Connector por ...

  7. BIO 和 NIO

    一.阻塞(Block)和非阻塞(NonBlock) 阻塞和非阻塞是进程在访问数据的时候,数据是否准备就绪的一种处理方式,当数据没有准备的时候阻塞: 阻塞:往往需要等待缞冲区中的数据准备好过后才处理其他 ...

  8. mysql修改字符集

    文章链接:https://www.cnblogs.com/hubavyn/p/4359315.html mysql修改表.字段.库的字符集(转) 原文链接:http://fatkun.com/2011 ...

  9. Mac 解决 Sourcetree 同步代码总需要密码的问题

    git config --global credential.helper osxkeychain

  10. Django-瀑布流

    1.通过ajax方式实现滚动条瀑布流(1)创建数据库:xixi\pubu\models.py from django.db import models #Img图片表 class Img(models ...