我的Vue.js的学习之旅记录(1)

学习途径：vue官网，慕课网
一.
所需知识储备：js，es6，webpack，npm

1.nuxt框架围绕vue推出
2.weex可以用vue写app

Vue.js 是什么
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

如果你想在深入学习 Vue 之前对它有更多了解，我们制作了一个视频，带您了解其核心概念和一个示例工程。

如果你已经是有经验的前端开发者，想知道 Vue 与其它库/框架有哪些区别，请查看对比其它框架。

用vue写出hello world

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>hello world</title><script src = './vue.js'></script>
</head>
<body><div id = "app">{{content}}</div>    <!--{{content}}调用data内对应的数据--><script>/*var dom = document.getElementById("app");dom.innerHTML = "hello world";setTimeout(function(){dom.innerHTML = "bye world";},2000)                             //隔两秒进行换内容*/var app = new Vue({el: '#app',           //实例负责管理的dom范围data:{                //定义数据content:'hello world'}})setTimeout(function(){app.$data.content = 'bey world'},2000)</script>
</body>
</html>

MVVM模式的初步接触
笔记：
几个关键点：
1.首先通过new创建Vue实例
2.Vue实例中的el属性会指定Vue实例要接管dom中对应的元素
3.v-on：为元素绑定事件
4.v-model：data中数据与元素中数据的双向绑定
5.v-for：循环提取一个数组或一个对象中的所有项
6.Vue最大的特点就是去除了对dom的直接操作，只用关心数据是如何变化的

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>ToDoList</title><script src = './vue.js'></script>
</head>
<body><div id = "app"><input type="text" v-model="inputValue"/>  <!--v-model数据的双向绑定--><button v-on:click="handleBtnClick">submit</button><ul><li v-for = "item in list">{{item}}</li>   <!--标签属性v-for--></ul>                                        <!--item是循环的每一项内容，list指的是data处的list--></div><!--MVVM设计模式的初步探索--><script>var app = new Vue({el:'#app',data:{list:[],inputValue:''},methods:{handleBtnClick:function(){this.list.push(this.inputValue)this.inputValue = ''//alert(this.inputValue)    //data中的inputValue}}})</script>
</body>
</html>

1.MVP模式
M：模型层
V：视图层
P：控制器层
View发出一个事件交给Presenter，控制器调取model或者直接操作view，presenter是核心，大部分的工作都在presenter层。
2.MVVM
M：负责储存数据（模型层）
V：负责显示数据（视图层）面向数据进行编程
VM：Vue自带的层

前端组件化
什么东西都揉在一起根本不好维护
特别是大型项目
所以我们把页面切分成几个部分，就是组件，也就是组件化的概念。

将的我的ToDoList组件化

Vue.component() 提供全局组件的一个方法

遭遇报错，为什么老师写的不一样就可以运行？？？？一脸懵逼？？？
（·····因为我把TodoItem写成ToDoItem了干！）

[Vue warn]: Unknown custom element: <todo-item> - did you register the component correctly? For recursive components, make sure to provide the "name" option.(found in <Root>)

<todo-item v-for="item in list"></todo-item>

Vue.component("ToDoItem",{      //vue.component()创建全局组件的一个方法template:"<li>Todo item</li>"          //写一个模板})

上述Vue.component中的ToDoItem改为todo-item即可

v-bind和v-on的缩写

<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a><!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>ToDoList</title><script src = './vue.js'></script>
</head>
<body><div id = "app"><div><input type="text" v-model="inputValue"/><button @click="handleBtnClick">submit</button></div><ul><todo-item :content ="item"v-for="item in list"></todo-item>      <!--v-bind子组件传入一个绑定值--></ul></div><script>/*Vue.component("TodoItem",{      //vue.component()创建全局组件的一个方法props: ['content'],                     //从父组件接收内容template:"<li>{{content}}</li>" ,         //写一个模板 插值表达式来写content})*/var TodoItem = {props: ['content'], template:"<li>{{content}}</li>"  ,}var app = new Vue({el:'#app',components: {TodoItem:TodoItem      //通过对象来注册局部组件 注册到Vue实例中}, data:{list:[],inputValue:''},methods:{handleBtnClick:function(){this.list.push(this.inputValue)this.inputValue = ''}}})</script>
</body>
</html>

TodoList组间传值

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>TodoList组件间传值</title><script src = "./vue.js"></script></head><body><!--这一次的学习中我们涉及到了子组件向父组件传值这个情况--><div id ="root"><div><input type = "text" v-model="todoValue" /><button @click = "handleBtnClick">Submit</button></div><ul><todo-item  v-bind:content="item"v-bind:index="index"            v-for="(item,index) in list"v-on:delete="handleItemDelete"> <!--父组件监听delete事件--></todo-item></ul></div><script>var TodoItem = {props:['content','index'],template:"<li v-on:click='handleItemClick'>{{content}}</li>",methods: {handleItemClick: function(){//$emit向外触发一个delete事件,也就是像父组件所监听的内容传值this.$emit("delete",this.index);  }}}var app = new Vue({el:'#root',components:{TodoItem: TodoItem},data:{todoValue:"",list:[]},methods:{handleBtnClick:function(){this.list.push(this.todoValue)this.todoValue=""},handleItemDelete:function(index){this.list.splice(index,1);      //splice(index,1) 从 index 开始删除1个元素}}})</script></body>
</html>

我的Vue.js的学习之旅记录(1)相关推荐

HACK RF学习之旅记录3——安装WIN10+Ubuntu双系统
鉴于之前的gnuradio运行例程FM声音卡顿,gprx采样率8M也卡顿,尝试安装双系统做一些工作,顺便学习下原生系统里面日常生存. 1 安装Ubuntu19.10 在WIN系统下搜了下例程大致明白, ...
laravel+vue.js的学习以及为什么浏览器中要有井号“#”
一.前言一直想找机会学一下vue,但是go还没来得及学,laravel的源码还没看完,学习vue更是遥遥无期.幸好新公司的项目是用laravel+vue编写的,这才有幸接触到vue. 但是我在观看项 ...
三十、开始前端Vue.js的学习之路
@Author:Runsen @Date:2019/08/07 @modified Date:2019/08/07 人生最重要的不是所站的位置,而是内心所朝的方向.只要我在每篇博文中写得自己体会,修炼 ...
vue.js的学习中的简单案例
今天学习了近年来挺火的一门JS技术,叫vue.js下面是它的一个简单案例: <html> <head> <title>$Title$</title> / ...
Vue.js（学习Vue3之前必须要掌握的知识）
文章目录第一个Vue程序 el挂载点 data数据对象 v-text v-html v-on 计数器 v-show v-if v-bind 图片切换 v-for v-on自定义参数 v-model双 ...
vue.js 的学习
⭐️ ? ✨ ⚡️ 技术栈 # vue官网http://vuejs.org/ # Vuex中文手册 http://vuex.vuejs.org # Vue-Router 手册 http://route ...
vue.js 基础学习 11天 -- 转载某培训机构学习资料（转载链接未找到-暂定原创 - 非原创）
Vue.js - Day1 课程介绍前5天: 都在学习Vue基本的语法和概念:打包工具 Webpack , Gulp 后5天: 以项目驱动教学: 什么是Vue.js Vue.js 是目前最火的一个前 ...
Vue.js教程学习笔记
官方视频简易教程:https://learning.dcloud.io/ 1. 安装与部署第一阶段(初学)可以通过在html文件中引入脚本来完成安装 <script src="vue ...
vue.js组件学习（上）
组件是vue.js中非常重要的一部分,打个比方,会用组件得人喝着茶就写完的页面,不会用的代码打到手抽筋也未必完的成. 首先何为组件组件可以封装重用的代码,扩展HTML元素,更高的说组件是自定义元素. ...

我的Vue.js的学习之旅记录(1)

我的Vue.js的学习之旅记录(1)相关推荐

最新文章

热门文章