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

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. Makefile 使用总结（转）

    Makefile 使用总结  转自 https://www.cnblogs.com/wang_yb/p/3990952.html 1. Makefile 简介 Makefile 是和 make 命令一 ...

  2. 第四节：跨域请求的解决方案和WebApi特有的处理方式

    一. 简介 前言: 跨域问题发生在Javascript发起Ajax调用,其根本原因是因为浏览器对于这种请求,所给予的权限是较低的,通常只允许调用本域中的资源, 除非目标服务器明确地告知它允许跨域调用. ...

  3. 使用VS的生成事件命令行指令将生成的exe，dll文件复制到指定文件夹中

    VS预生成事件命令行 和 生成后事件命令行 宏说明 $(ConfigurationName)            当前项目配置的名称(例如,“Debug|Any CPU”). $(OutDir)   ...

  4. TED学习笔记

    20180621(如何做得更好) 多一些探索,询问,聆听,奋斗,成就自己,比一味的做事儿有效的多. 1.刻意让自己的生活在两个区域交替:(1)学习区Learning Zero (2)执行区Perfor ...

  5. Excel 2010如何打开多个独立窗口？

    https://jingyan.baidu.com/article/86fae346acca7d3c49121ad4.html

  6. AWK如何打印从某一列到最后一列的内容

    awk -F " "  '{for (i=4;i<=NF;i++)printf("%s ", $i);print ""}' file

  7. Spring-boot 国际化

    在application.properties文件中配置 spring.message.basename=i18n.login 页面使用 th:text="#{login.tip}" ...

  8. Android 键盘键名和键值列表

     电话键 KEYCODE_CALL 拨号键 5 KEYCODE_ENDCALL 挂机键 6 KEYCODE_HOME 按键Home 3 KEYCODE_MENU 菜单键 82 KEYCODE_BACK ...

  9. yum install 报错[Errno 14] curl#37 - Couldn't open file /mnt/repodata/repomd.xml

    最近在玩centos7,之前装系统没太注意yum这个东东,今天用别人装好的系统想用yum install 一个东西,结果报各种错,所以就是: 1.然后按照网上的一些修改,先是执行: yum cleam ...

  10. Zabbix（一）

    安装一台CentOS: CentOS-7.4-x86_64-DVD-1708 https://www.cnblogs.com/xiewenming/p/7732144.html https://blo ...