vue笔记1

最新推荐文章于 2020-05-15 15:36:36 发布

十亿萝莉的夢

最新推荐文章于 2020-05-15 15:36:36 发布

阅读量243

点赞数

分类专栏： vue 文章标签： vue vue

本文链接：https://blog.csdn.net/David_lyy/article/details/88832199

版权

vue 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

今日内容
   1. vue.js
      - Vue.js模板语法
      - Vue指令系统
      - ES6常用语法
      - 案例
      
知识点复习回顾
   1. HTML（超文本标记语言）
      - 行内标签(行内标签不能设置宽高，但是input，img可以）
         a i（斜体) strong b em input label span button textarea img
      
      - 块级标签（独占一行）
         div p h1~h6 ul li table form dl ol select
         
   2. CSS（层叠样式表）
      - 第一种：<div style=""></div)
      - 内接式：<style><style>
      - 外接式：<link src=".statics/css.css"></link>
      
      - 基本选择器
         id: 权重100
         class：10
         标签选择器：1
         继承的样式：0
         
         如果权重相同，以后面的为准
         
         - 定位
            position: "fixed"
            position: "relative"  (参考：自己原始位置)
            position: "absolute" （参考：最近父标签）
               
         -行内标签和块级标签的相互转化
            display：block, inline, inline-block
            
      - 高级选择器
         - 后代选择器 div .active {}
         - 子代选择器 div > .active {}
         - 组合选择器 div, .active {}
         - 交集选择器 div.span.div
         
   3. JavaScript
      - 操作对象也是标签
      - JavaScript基本数据类型
         String, Number, null, boolean, undefine
         引用类型：Object(字典), Array(列表), function
      
      - 如何实例化一个对象？
         - 通过构造函数（Date，Object，Array）：new Date(), new Object(), new Array()
         - 字面量：var obj = { 'name': "pizza" }, var ary = []
         - 自定义的方式
            function Foo(name, age) {
               this.name = name;
               this.age = age;
            }
            
            var foo = new Foo("pizza", 18);
         
      - DOM操作
         第一步：找到事件源（document.getElementById("app")
         第二部：绑定事件
         第三部：操作标签（文本值，标签属性，class="active", innerText = "Hello World")
         
         document.getElementById("app").style.color = 'red';
         
      - BOM操作
         window.reload()
         window.hash()
         window.location()
         window.href()
         window.history()
      
   4. jQuery（JavaScript库，封装很多的好用的接口，标签的便利）
      $("#app").css({'color', 'red', 'background-color': 'black'})
      
   5. bootstrap

今日详细
   1. Vue.js
      1.1 什么是Vue.js？
         Vue.js是一个前端的框架，jQuery是一个前端的库
         面试题：请说出你常用的Python标准库
         Python: re, os, sys, json, time, random, collections, functools, socket, processing,
               threading, uuid, hashlib, pymysql, socketserver, copy
               
         面试题：请说出你常用的Python第三方库
         Python：django，beautifulsoup4, requests, scrapy, gevent, scheduled
         
         库：跟业务逻辑息息相关的工具（jQuery库）
         框架：程序员可能不太关注但是有必须做的（如果没有框架）
         
         面试题：请说出你常用的字符串方法
         
      1.2 为什么要学Vue.js？
         Vue.js，Angular，React
         尤雨溪  Google   facebook
         中文文档非常的丰富
         北京的所有企业都用vue
         小巧
         灵活（渐进式的框架）
         学习成本相对新人来讲，低
         性能方面：Vue.js = react > angular
      
      1.3 什么时候该用vue？
         在北京的时候
         vue.js（中大型项目）
         react（超大的项目用）
         
      1.4 如何使用Vue.js?
         1.4.1 直接引入
            - <script src="./statics/vue.min.js"></script>
            - 引入之后在全局就会有一个Vue Function
            
            - cdn
            -npm
         1.4.2 vue的使用
            <!DOCTYPE html>
            <html>
            <head>
               <!--第一步：引入Vue，全局暴露一个Vue Function-->
               <script src="./statics/vue.min.js"></script>
            </head>
            <body>
               <!--第二步：声明领地（作用范围）
               <div id="app">xxxx</div>
               
               <script>
                  // 第三步：创建一个Vue实例
                  new Vue({
                     // 第四部：查找作用域（必须的参数）
                     el: "#app",
                     data: {
                        xxxx: "今晚去我家"
                     }
                  })
               </script>
            </body>
            </html>

   2. Vue.js的模板语法
      <p>{{ xxxxx + xxxxx }}</p>
        <p>{{ '今晚去我家' }}</p>
        <p>{{ {'name': "鑫姐" } }}</p>
        <p>{{ 1 > 2 ? "大于" : "傻逼" }}</p>
        <p>{{ python + linux }}</p>
        <p>{{ totalScore }}</p>
   
   3. Vue.js指令系统
      3.1 指令以v-开头，用来操作标签的文本值，操作标签的属性，绑定事件
         - 操作标签的文本值
            v-text: 渲染文本值
            v-html: 渲染原始标签
            v-for: 处理丰富的数据结构
            v-if, v-else-if, v-else: 判断标签是否显示
            v-show：判断标签是否显示
               渲染的开销
                  v-if：低
                  v-show：高
               切换的开销
                  v-if：appendChild, removeChild 高
                  v-show：低
            
         - 操作标签的属性（class，href，src）
            v-bind:href=""
            v-bind:class=""
            小结：对于属性的操作，一定是通过动态的数据来进行增加或者删除的
            
         - 绑定事件
            v-on:click="myClick"
            注意：属性通过vue绑定的时候，必须加上冒号
         
         - 计算属性
            - 可以监听多个值（只要数据修改，就触发重新计算）
            - 页面一加载就计算
            
         - 双向数据绑定
            v-model
   
   4. 轮播图

十亿萝莉的夢

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue笔记1

今日内容 1. vue.js - Vue.js模板语法 - Vue指令系统 - ES6常用语法 - 案例知识点复习回顾 1. HTML（超文本标记语言） - 行内标签(行内标签不能设置宽高，但是input，img可以） a i（斜体) strong b em input label span...
复制链接

扫一扫

专栏目录