vue 自学笔记(1)

时间:2022-09-10 11:59:52

从to do list  开始 

    一: 安装 

     1: 导入cdn

          <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
    二: 创建一个vue实例
          在script中创建vue 对象
          所有的 Vue 应用都是从创建一个实例开始的,它通过Vue函数创建
        vue 自学笔记(1)

          从这个实例创建后,Vue 框架就通过这个vm实例管理它可以管理的内容。但它管理的是哪一部分呢?

         

          vue 自学笔记(1)

          在 html 中,有一个 id 为 app 的 div 盒子,想必你也知道了,这个 id 为 app 的内容就是被vm实例管理的页面内容。

          

          vue 自学笔记(1)

            

        我们将 app 挂载到了vm实例上,现在vm就可以正式接管 app 下所有的内容了。vm中的数据写在 data 中, 这些数据也就是流向页面的数据,页面和数据相互影响。

        页面的将数据呈现在页面的方式又是什么?Vue提供了很多方式,现在我们在 demo 中使用最常用的小胡子语法。

        vue 自学笔记(1)

 

          

vue 自学笔记(1)

vue 自学笔记(1)

 

    三:创建第一个组件
      组件开发是使用框架开发的特色,对于页面可以重复使用的部分,我们可以将其样式和功能抽离出来,以便以后反复使用。这里的 TodoList 的列表部分我们可以抽离成独立的组件。       

vue 自学笔记(1)

    组件分为全局组件和局部组件,这里我们使用哪种方式都可以。组件的 props 中的内容,是父组件传递进来的值。 这时,父组件就可以做,通过直接在子组件上写属性传值。

  vue 自学笔记(1)

    三:实现单机删除todo

    

我们想实现单击 item 就删除该项,之前在渲染 TodoItem 的时候,我们就给子组件绑定了一个 handleItemClick 方法。那我们能直接在这个方法里写一个方法,把父组件的 state.list 中的一项删除掉么?

很显然是不可以的,这个时候我们需要明确单向数据流的概念。

 

 

    四:单项数据流

       单向数据流目的

       

通俗的来讲,父组件可以给子组件传值,但子组件不可以直接去修改父组件的值。React 中也是这种设计思想。

其实这样做是一种安全的做法,在项目较大,子组件层级过多的情况下,层层传递,很多子组件使用一个父组件的传值,若是子组件直接改动父组件的值,就可能会造成其他子组件依赖的值出现问题。

 

      五:传递数据

例如,我们希望把父组件Home.vue的数据传递给子组件,例如Header.vue.

可以通过props属性来进行传递.

传递数据三个步骤:

vue 自学笔记(1)

vue 自学笔记(1)

vue 自学笔记(1)

      传递数据总结

vue 自学笔记(1)

 

														
		

vue 自学笔记(1)的更多相关文章

  1. vue 自学笔记记录

    vue 自学笔记(一): 知识内容:  安装vue ,创建vue实例,安装第一个组件,单项数据流 https://www.cnblogs.com/baili-luoyun/p/10763163.htm ...

  2. vue自学笔记

      做前端也做了一段时间了,为了高薪,不能一直做网页不是~~,所以从今天开始整理vue的笔记 内容都是从网上搜集整合并且自己实践过了的,需要注意的点,也在后面标注了“注”   当然了,如果有什么问题的 ...

  3. Vue自学笔记--项目的创建

    一.项目的创建 1.必须要安装nodejs    2.搭建vue的开发环境 ,安装vue的脚手架工具   官方命令行工具        npm install --global vue-cli  /  ...

  4. vue 自学笔记&lpar;三&rpar; 计算属性与侦听器

    一:计算属性 虽然在模板内使用表达式对属性进行处理十分便利,例如在小胡子语法里写number + 1实现对数据的简单处理,但若我们在其中加入大量的代码,使得逻辑变重,导致难以维护.例如下面的代码,并不 ...

  5. vue 自学笔记&lpar;4&rpar;&colon; 样式绑定与条件渲染

    一:对象绑定 Vue 对于页面的样式加载也有独特的方式,按照 Vue 提供的方式,我们可以轻松的控制它们的呈现. 假使我们要实现点击 div 变色 Vue 提供的样式方案的本质是对元素节点进行属性的绑 ...

  6. vue 自学笔记&lpar;5&rpar; 列表渲染

    列表渲染 一:v-for 指令 当我们涉及到列表渲染数据的时候,不可能做一个重复的工作去不停的一个一个的渲染每一项列表.并且列表数据的表现,比如从后端请求过来的数据,不可能是一个一个的单独的 JSON ...

  7. vue 自学笔记&lpar;6&rpar; axios的使用

    前情提要:axios 的使用 axios是一个ajax 的包,主要在node.js 使用 axios 的官网 https://www.kancloud.cn/yunye/axios/234845 一: ...

  8. vue 自学笔记&lpar;七&rpar; 组件细节问题

    前情提要: 这里盘点一下,组件细节的问题 现在我们观察一些用框架开发的网页BiliBili.掘金,会发现很多部分都十分相似或者一模一样,我们甚至可以将其拆分归类.而事实上,页面的确是被一个个组件构成的 ...

  9. vue 自学项目笔记

    感觉小青推荐的学习网课,  利用vue 仿制一个去哪网, 学习的东西很多, 在食用之前,需要先确保js 和css 过关 js https://www.bilibili.com/video/av3009 ...

随机推荐

  1. web自动化测试中绕开验证码登陆的方式

    web自动化测试中登陆需验证码是很大的一个困扰.现推荐一种简单的避开验证码登陆的方式,先代码进入登录页,人工输入验证码登录后浏览器自动保存cookie,再在新的标签中登录. 具体代码如下: publi ...

  2. java -X 这不是标准的选项只是为了获取帮助信息

    -? -help      输出此帮助消息 获取帮助信息方式有三种: java java -? java -help -X            输出非标准选项的帮助 java -X -Xms< ...

  3. &lbrack;A Top-Down Approach&rsqb;&lbrack;第一章 计算机网络和因特网&rsqb;

    [A Top-Down Approach][第一章 计算机网络和因特网] 标签(空格分隔): 计算机网络 介绍基本术语和概念 查看构成网络的基本硬件和软件组件. 从网络的边缘开始,考察在网络中运行的端 ...

  4. 关系型数据库工作原理-事务管理&lpar;一&rpar;&lpar;翻译自Coding-Geek文章&rpar;

    本文翻译自Coding-Geek文章:< How does a relational database work>. 原文链接:http://coding-geek.com/how-dat ...

  5. sas transpose 代码备忘

    OPTIONS NOCENTER LS=MAX PS=MAX; LIBNAME S '.\report';/*PROC PRINT DATA=S.doquestionr(WHERE=(sid=1972 ...

  6. Vscode设置个人爱好

    Vscode设置个人爱好   插件列表 abusaidm.html-snippets-0.1.0 adamwalzer.string-converter-0.0.9 AESSoft.aessoft-c ...

  7. DevExpress v17&period;2—WinForms篇(六)

    用户界面套包DevExpress v17.2终于正式发布,本站将以连载的形式为大家介绍各版本新增内容.开篇介绍了DevExpress WinForms v17.2 Data Grid Control ...

  8. Linux下C语言的调试--转

    调试是每个程序员都会面临的问题. 如何提高程序员的调试效率, 更好更快地定位程序中的问题从而加快程序开发的进度, 是大家共同面对的问题. 可能Windows用户顺口就会说出:用VC呗 :-) , 它提 ...

  9. 6 Easy Steps to Learn Naive Bayes Algorithm &lpar;with code in Python&rpar;

    6 Easy Steps to Learn Naive Bayes Algorithm (with code in Python) Introduction Here’s a situation yo ...

  10. &lbrack;转&rsqb;自定义Drawable实现灵动的红鲤鱼动画(上篇)

    此篇中的小鱼动画是模仿国外一个大牛做的flash动画,第一眼就爱上它了,简约灵动又不失美学,于是抽空试着尝试了一下,如下是我用Android实现的效果图:   小鱼儿 由于整个绘制分析过程比较繁琐所以 ...