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

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. 金融量化分析【day112】:股票数据分析Tushare2

    目录 1.使用tushare包获取某股票的历史行情数据 2.使用pandas包计算该股票历史数据的5日局限和60日均线 3.matplotlib包可视化历史数据的收盘价和历史均线 4.分析输出所有金叉 ...

  2. .net异步委托

    委托Delegate是一个类,定义了方法的类型, 使得可以将方法当做另一个方法的参数来进行传递,这种将方法动态地赋给参数的做法,可以避免在程序中大佬使用If-Else(Switch)语句,同时使得程序 ...

  3. keras系列︱Sequential与Model模型、keras基本结构功能（一）

    引自:http://blog.csdn.net/sinat_26917383/article/details/72857454 中文文档:http://keras-cn.readthedocs.io/ ...

  4. https协议的简单理解

    本片文章梳理三个知识点: 1.对称加密和非对称加密的区别 2.https协议的请求流程 3.http协议和https协议的区别 一.对称加密和非对称加密 对称加密:加密和解密使用同一密钥. 非对称加密 ...

  5. v-model

    仅用于以下控件: <input> <select> <textarea> 组件 v-model以Vue 实例的数据作为数据来源,应当在组件的 data 选项中声明初 ...

  6. 第八节，Opencv的基本使用------存取图像、视频功能、简单信息标注工具

    1.存取图像 import cv2 img=cv2.imread('test.jpg') cv2.imwrite('test1.jpg',img) 2.图像的仿射变换 图像的仿射变换涉及图像的形状位置 ...

  7. SQL Server - group by

    转载自https://segmentfault.com/a/1190000006821331 在平时的开发任务中我们经常会用到MYSQL的GROUP BY分组, 用来获取数据表中以分组字段为依据的统计 ...

  8. docker创建Redis集群

    开始工作: yum install wegt ##安装下载工具 yum install net-tools ##安装网络工具 yum install tree ##安装tree命令(方便查看集群配置文 ...

  9. EF的三种数据加载方式

    EF的关联实体加载有三种方式:Lazy Loading,Eager Loading,Explicit Loading,其中Lazy Loading和Explicit Loading都是延迟加载. (一 ...

  10. java第一个demo（简单登陆窗体）

    首先新建一个Maven项目 选择一个存放项目的目录 ,点击完成(下图). 为了防止jdk版本的问题,所以在pom.xml里面做一个配置,让整个项目统一用jdk 1.8版本(1.7之前可能会存在一些问题 ...