Q:1.动画的使用方法以及动画库的使用方式

2.vue中的指令有哪些？

3.vue中生命周期钩子函数有哪些？分别代表什么含义？

4.filter的语法是什么？

5.computed的特点是什么？

6.watch与computed的区别？

7.vue中的配置项有哪些？

8.页面中新增加属性后页面不渲染问题怎么解决？

9.数组中的forEach，some，every是如何使用的？

10.格式化时间时的补零操作两种方法？

1.组件

特点：一组可复用的vue实例

组件化和模块化的区别？

组件化：组件化是指解耦复杂系统时将多个功能模块拆分、重组的过程，有多种属性、状态反映其内部特性

特点：一个具有html+css+js的页面

模块化：侧重的功能的封装，主要是针对Javascript代码，隔离、组织复制的javascript代码，将它封装成一个个具有特定功能的的模块。

2.命名规则

1.不能以标签起名，包含大写
2.建议用驼峰起名
3.首字母大写，后面直接写名字。如果后面有大写需要转换为驼峰      

3.template模板

<!DOCTYPE html>
<html lang='en'>
​
<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
</head>
​
<body>
    <div id='app'>
        <v-one></v-one>
        <v-two></v-two>
        <v-three></v-three>
    </div>
</body>
<!-- 开发环境 -->
<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
<script>
    // 组件：一组可复用的vue实例
    // 用法：全局定义,局部定义
​
    // Vue.component('组件名',模板对象)
    // components:{组件名:{模板对象}}
​
//必须要写在实例对象之前
Vue.component('vOne',{
    // template:要往页面上渲染的模板
    template:'<div>我是第一个组件</div>'
})
​
​
    let vm = new Vue({
        el: '#app',
        data: {},
        methods: {
        },
        components:{
          vTwo:{
              template:'<div>我是第二个模板对象<div>abc</div></div>'
          },
          vThree:{
              template:`<div>我是第二个模板对象
                <h2>我是标题2</h2>
              </div>`
          }   
        }
    })
    // 特点：template 有且只能有一个根元素 通常是div
</script>
​
</html>

4.data使用

重点：组件中定义data为函数，原因是：为了共享数据但是又互相不干扰.
​
<body>
    <div id='app'>
        <div>{{msg}}</div>
        <p>{{msg}}</p>
        <button @click = 'change'>点击修改msg</button>
        <hr>
​
        <v-one></v-one>
        <v-one></v-one>
    </div>
    <template id="temp1">
        <div>
            <p>{{content}}</p>
            <button @click='changeOne'>修改内容</button>
        </div>
    </template>
</body>
 let vm = new Vue({
        el: '#app',
        data: {
            msg:'abc'
        },
        methods: {
            change(){
                this.msg='123'
            }
        },
        components:{
            vOne:{
                template:'#temp1',
                data(){
                    return {
                        content:'我要被修改了'
                    }
                },
                methods: {
                    changeOne(){
                        this.content = '我被修改了'
                    }
                },
            }
        }
    })
    // 总结:data定义为函数的原因:由于需要共享数据，但是又要互不干扰,所以定义为函数

5.组件嵌套

注意：子组件只能在父组件中使用   子组件中的数据目前仅能供自己使用
​
<!DOCTYPE html>
<html lang='en'>
​
<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
</head>
​
<body>
    <div id='app'>
​
        {{msg}}
​
        <v-one></v-one>
    </div>
    <template id="temp1">
        <div>
            <h2>我是模板一</h2>
            {{name}}
            <!-- {{msg}} -->
            <!-- <v-inner></v-inner> -->
        </div>
    </template>
    <template id="temp2">
        <div>
            <h2>我是模板二</h2>
          
        </div>
    </template>
</body>
<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
<script>
    // 组件：一个可复用的vue实例
    let vm = new Vue({
        el: '#app',
        data: {
            msg:'hello '
        },
        methods: {
        },
        components:{
            vOne:{
                template:'#temp1',
                components:{
                    vInner:{
                        template:'<div>我是里层嵌套的模板<v-three></v-three></div>',
                        components:{
                            vThree:{
                                template:'#temp2'
                            }
                        }
                    },
                    vOuter:{
​
                    }
                },
                data(){
                    return {
                        name:'张三'
                    }
                }
            }
        }
    })
    // 总结：组件中关系：只有父子和非父子关系
    //        嵌套:子组件只能在父组件中使用
    //      组件中的data ：定义为方法，必须有返回值，同时返回值的类型为对象 
    //       data 中的数据只能供自己使用 如果其他组件需要使用需要传值 比如：data,methods,filter,cmpputed,watch...
</script>
​
</html>

6.后台管理页面实现

注意：1.外层嵌套大盒子（container） 2.划分布局 3.书写组件 4.组件嵌套 5.添加样式

7.生命周期 --8个钩子函数 mounted 是最常用的

v-if 会引起生命周期的改变

v-show 不会引起

<!DOCTYPE html>
<html lang='en'>
​
<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
</head>
​
<body>
    <div id='app'>
        <div v-html='msg' v-if='isShow'></div>
        <button @click='change'>点击</button>
​
        <hr>
        <v-one v-show='isShow'></v-one>
​
    </div>
​
​
    <template id="temp1">
        <div>
            <div v-if='show'>{{con}}</div>
            <button @click='changeC'>点击切换内容</button>
        </div>
    </template>
</body>
<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            msg: 'hello world！',
            isShow: true
        },
        methods: {
            change() {
                this.isShow = !this.isShow
            }
        },
        components: {
            vOne: {
                template: '#temp1',
                data() {
                    return {
                        con: '我是组件模板',
                        show: true
                    }
                },
                methods: {
                    changeC() {
                       this.con = '我被修改了!!!!!!!'
                    }
                },
                mounted() {
                    console.log('组件内容挂载完成')
                },
                destroyed() {
                    console.log('销毁执行了')
                },
            }
        },
        mounted() {
            console.log('vm内容挂载完成')
        },
        destroyed() {
            console.log('vm销毁执行了')
        },
    })
</script>
​
</html>

上述案例生命周期的执行过程为：

首先是vm实例的生命周期执行beforeCreate，created，beforeMount，之后是到组件走生命周期beforeCreate，created，beforeMount，mounted，最后是走vm的mounted。

7.脚手架

步骤：

//全局安装webpack
npm i webpack -g
​
//查看版本
webpack -v
​
//全局安装vue脚手架 2.x    
npm i vue-cli -g
​
//查看版本
vue -V
​
以上操作只需要操作一次
//创建项目
vue init webpack demo
​
//进入项目
cd demo 
​
//启动 
npm run dev //localhost:8080
​
​
注意：  安装cnpm方法  淘宝镜像
npm i -g cnpm --registry=https://registry.npm.taobao.org  
注意：
1.名字：不能带大写
2.全选n
3.在当前文件夹中不能有vue.js这个文件
​
1.index.html ->页面的入口文件
2.main.js->程序的入口文件
3.App.vue ->组件-->类似上午的containter

总结:

后台项目：

1.划分组件

App.vue->container 整个容器

header,footer，main，left，right 都是单独的组件 需要用谁直接 import导入就行

//点击弹框

局部定义弹框 首先要有弹框组件 alertbtn.vue 哪用在哪里引入

<template>
  <div class="left">
      left
      <v-alert></v-alert>
  </div>
</template>
<script>
import vAlert from './aletrBtn'
export default {
  components: {
      vAlert
  },
  data() {
    return {};
  },
  methods: {},
  mounted() {},
};
</script>
<style>
.left{
    width: 200px;
    background: orange;
}
</style>

//全局引入弹框 需要在main.js中定义

// 引入弹框的组件

import vAlert from './components/aletrBtn.vue'

Vue.component('vAlert',vAlert)

在其他页面只需要调用组件名即可 （v-alert）

<template>

    <div class="header">

        header

        <v-alert></v-alert>

    </div>

</template>

<script>

export default {

}

</script>

<style>

    .header{

        width: 100vw;

        height: 100px;

        background: red;

    }

</style>

vue基础4的更多相关文章

  1. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十八║Vue基础: 指令(下)+计算属性+watch

    回顾 今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈). 书接上文,昨天正式的开始了Vue的代码 ...

  2. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十九║Vue基础: 样式动态绑定+生命周期

    回顾 哈喽大家好,前后端分离系列文章又开始了,今天周一,还是感谢大家花时间来观看我写的博客,周末呢,没有写文章,但是也没有闲着,主要是研究了下遗留问题,看过之前文章的应该知道,之前的在AOP使用Red ...

  3. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十║Vue基础终篇：传值+组件+项目说明

    缘起 新的一天又开始啦,大家也应该看到我的标题了,是滴,Vue基础基本就到这里了,咱们回头看看这一路,如果你都看了,并且都会写了,那么现在你就可以自己写一个Demo了,如果再了解一点路由,ajax请求 ...

  4. python 全栈开发，Day89(sorted面试题,Pycharm配置支持vue语法,Vue基础语法,小清单练习)

    一.sorted面试题 面试题: [11, 33, 4, 2, 11, 4, 9, 2] 去重并保持原来的顺序 答案1: list1 = [11, 33, 4, 2, 11, 4, 9, 2] ret ...

  5. Vue 基础精讲

    Vue 基础精讲 Vue 官方文档:https://cn.vuejs.org/v2/guide/ VUE 实例 每个组件都是一个 vue 的实例. 一个 vue 项目是由实例组成的. vue 实例上有 ...

  6. Vue基础以及指令

    Vue 基础篇一   一.Vue框架介绍 之前大家学过HTML,CSS,JS,JQuery,Bootstrap,现在我们要学一个新的框架Vue~ Vue是一个构建数据驱动的web界面的渐进式框架. 目 ...

  7. 2-5 vue基础语法

    一.vue基础语法 语法: {{msg}} html赋值: v-html="" 绑定属性: v-bind:id="" 使用表达式: {{ok? "ye ...

  8. Vue 1-- ES6 快速入门、vue的基本语法、vue应用示例，vue基础语法

    一.ES6快速入门 let和const let ES6新增了let命令,用于声明变量.其用法类似var,但是声明的变量只在let命令所在的代码块内有效. { let x = 10; var y = 2 ...

  9. vue基础知识之vue-resource/axios

    Vue基础知识之vue-resource和axios(三)   vue-resource Vue.js是数据驱动的,这使得我们并不需要直接操作DOM,如果我们不需要使用jQuery的DOM选择器,就没 ...

  10. Vue基础及脚手架环境搭建

    From:http://www.jianshu.com/p/dc5057e7ad0d 一.vue基础 “Vue2.0”跟俺一起全面入坑 01 “Vue2.0”跟俺一起全面入坑 02 “Vue2.0”跟 ...

随机推荐

  1. vue关于图片参数赋值

    解决方法: 加个require()就可以了 <img :src="require('../xxx/images/'+imgsrc+'.png')"/> export d ...

  2. php 对二维数组按照汉字首字母排序

    1 /** 2 * 取汉字的第一个字的首字母 3 * @param type $str 4 * @return string|null 5 */ 6 function _getFirstCharter ...

  3. Java基础语法闪过——纯小白

    Java语法突击 笔者因为学校奇葩选课原因,需要学习Java,考试所迫和大伙一起交流复习下基础的语法内容,大家都一把拿下考试 观前提醒:本文整理的有些仓促了,简单几分钟看看Java有什么内容还好,如果 ...

  4. 使用wxpython开发跨平台桌面应用，设计系统的登录界面

    一般的系统登统界面,设计好看一些,系统会增色不少,而常规的桌面程序,包括Web上的很多界面,都借助于背景图片的效果来增色添彩,本篇随笔介绍基于WxPython来做一个登录界面效果,并对系统登录界面在不 ...

  5. 从2s优化到0.1s

    前言 分类树查询功能,在各个业务系统中可以说随处可见,特别是在电商系统中. 但就是这样一个简单的分类树查询功能,我们却优化了5次. 到底是怎么回事呢? 背景 我们的网站使用了SpringBoot推荐的 ...

  6. ChatGPT生成测试用例的最佳实践（一）

    前面介绍的案例主要展示了ChatGPT在功能.安全和性能测试用例生成方面的应用和成果.通过ChatGPT生成测试用例,测试团队不仅可以提升工作效率,还可以加快测试工作的速度,尽早发现被测系统中的问题. ...

  7. .NET Core 异常(Exception)底层原理浅谈

    中断与异常模型图 内中断 内中断是由 CPU 内部事件引起的中断,通常是在程序执行过程中由于 CPU 自身检测到某些异常情况而产生的.例如,当执行除法运算时除数为零,或者访问了不存在的内存地址,CPU ...

  8. 【COS 加码福利】COS 用户实践有奖征文，等你来投稿！

    COS用户实践征文活动火热进行中,本次征集主题为:如何在生态场景下使用 COS? 优质文章将有机会被编入腾讯云官方文档库,供广大用户学习参考.更有多重好礼等你来拿,速来围观投稿吧! 投稿说明: 1.投 ...

  9. COSBrowser iOS 版 | 如何不打开 App 查看监控数据?

    您是否有遇到这样的场景?当需要实时查看存储监控数据.查看某个存储桶的对象数量,又或者想了解某一个存储类型文件的下载量在当前与前一天的对比情况,是上涨了还是下降了,这时您是否也在经历频繁的打开关闭 Ap ...

  10. ASCII 与 Unicode 中的引号

    原文地址:https://www.cl.cam.ac.uk/~mgk25/ucs/quotes.html 摘要 请不要使用 ASCII 中的重音符号 ` (0x60) 作为左边与 ASCII 中的撇号 ...