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

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. CMDB资产管理系统开发【day26】:linux客户端开发

    客户端疑难点及获取流程 1.linux客户端支持2就可以,python3就是很麻烦 难道你要求所有的客户端都上pytho3吗? 现在从bin的入口进去 HouseStark.ArgvHandler(s ...

  2. java poi 操作ppt

    java poi 操作ppt 可以参考: https://www.w3cschool.cn/apache_poi_ppt/apache_poi_ppt_installation.html http:/ ...

  3. 抓包工具Charles基本用法

    我们在进行B/S架构的Web项目开发时,在前端页面与后台交互的调试的时候,通常使用在JSP中加入“debugger;”断点,然后使用浏览器的F12开发者工具来查看可能出错的地方的数据.或者使用Http ...

  4. javaScript drag对象进行拖拽使用详解

    目录 drag简介 兼容性 drag事件 拖拽流程 DataTransfer对象 drag拖放桌面文件 drag实例 小结 drag简介 HMTL5提供的支持原生拖拽的实现 兼容性如何? 桌面端的支持 ...

  5. LINQ to SQL 的常见异常及解决办法

    Ø  简介 本文主要介绍 LINQ to SQL 中常见的异常,以及对应的解决办法.包括以下内容: 1.   左连接情况下,右表非空类型字段可能抛出异常 1.   左连接情况下,右表非空类型字段可能抛 ...

  6. java8 按对象属性值分组

    Map<String, List<User>> userMap = list.stream().collect(Collectors.groupingBy(User::getG ...

  7. Codeforces 1097G

    根本想不到 CF1097G 题意 给出一棵树,定义f(S)为用最少的边连通点集$ S$的边数 求$ \sum\limits f(S)^k$ $ n \leq 10^5 k \leq 200$ 题解 假 ...

  8. 【原创】大叔经验分享（26）hive通过外部表读写elasticsearch数据

    hive通过外部表读写elasticsearch数据,和读写hbase数据差不多,差别是需要下载elasticsearch-hadoop-hive-6.6.2.jar,然后使用其中的EsStorage ...

  9. java学习 之 第一个程序及认识

    以前也看过一系列的java方面的程序,但是还没有正式敲过,今天正式学习并且正式敲出代码.在这里记录下来今日所得 写作工具:Notepad++ 在写作工具方面好多人建议用 记事本,但是我还是认为用 No ...

  10. apache基础

    apache基于多域名的虚拟主机 NameVirtualHost *:80<VirtualHost *:80> DocumentRoot "/var/www/html/xk/sh ...