前端小白的崛起：Vue基础课1.0_编程语言

	前端小白的崛起：Vue基础课1.0
	阿易的猫 L1 • 2021-08-03 • 回复 0 • 只看楼主 • 举报

前端必备框架-----Vue.js

为了跟上学习，我会同时发很多帖子关于前端学习知识，我目前在学vue，希望和大家一起进步，一起学习。

1、基础-现在的前端现状

开发人员大部分在用Vue开发
Vue学习曲线相比其他框架简单很多

2、基础-了解什么是vue

目前前端必备技能

传统方式已经不能适应目前越来越复杂的开发需求

用vue的开发方式会简单、高效

三大框架(vue、react、angular)

3、基础-vue 能做什么

不用操作DOM

单页面应用web项目(SinglePageApplication 项目，例如https://worktile.com/）简称:SPA

传统网站开发一般来说需求不大

当下各种新框架都采用了类似Vue或者类似React的语法去作为主语法, 微信小程序/MpVue.....

结论:掌握Vue的开发语法相当于掌握了新的开发模式,可以适应目前绝大多数的技术环境

3、基础-vue 特点

数据驱动视图可以让我们只关注数据

MVVM 双向绑定

通过指令增强了html功能

组件化复用代码

开发者一般只需要关注数据

4、基础-Vue-API

Vue官方文档

Vue开源项目汇总

Vue.js中文社区

所有关于Vue的问题都可以通过查阅文档解决

5、基础-vue 三种安装方式

直接下载源码然后通过路径引入

开发版本：https://vuejs.org/js/vue.js

生产版本：https://vuejs.org/js/vue.min.js

在线cdn引入的方式
<script  src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
采用 npm 安装的方式
// 现状: 都会采用npm的方式来进行正式项目开发
npm install vue 
注意: Vue.js 不支持 IE8 及其以下版本

6、基础-HelloWorld

步骤:

1. body中,设置Vue管理的视图<div id="app"></div>
2. 引入vue.js
3. 实例化Vue对象new Vue();
4. 设置Vue实例的选项:如el、data...     
            new Vue({选项:值});
5. 在<div id='app'></div> 中通过{{ }}使用data中的数据

// 1.我是Vue所管理的视图div #app 
<div id="app">
    // 5.在视图里使用Vue实例中data里面的list数据
    <p>{{list}}</p>
</div>
// 2.引入vue.js 
<script src="./vue.js"></script>
<script>
    // 3.实例化Vue对象
    new Vue({
    // 4.设置Vue实例的选项：如el、data...  
        el: '#app',
        data: {
            list: '我是模拟发起ajax请求后从服务端返回的数据'
        }
    })
</script>

7、基础-实例选项-el

作用:当前Vue实例所管理的html视图

值:通常是id选择器(或者是一个dom对象)

注意！！！！不要让el所管理的视图是html或者body!!!!

路径:
new Vue({
    // el: '#app' ,  id选择器
    // el: '.app',   class选择器
    el: document.getElementById("app") // dom对象
})
任务:

尝试用 id选择器设置el 页面显示hello world

尝试用class选择器设置el 页面显示hello world

尝试用dom对象设置el 页面显示hello world

尝试设置html 或者body为el 查看效果

8、基础-实例选项-data

掌握data基本用法

Vue 实例的data(数据对象)，是响应式数据(数据驱动视图)

data中的值{数据名字:数据的初始值}

data中的数据msg/count 可以在视图中通过{{msg/count}}访问数据

data中的数据也可以通过实例访问 vm.msg或者vm.$data.msg

data中的数据特点:响应式的数据->data中的数据一旦发生变化->视图中使用该数据的位置就会发生变化

路径
let vm = new Vue({
    el: "#app",
    data: {
       msg: 'abc',
       count: 100，
       list: [1, 2, 3]
    }
})
vm.msg = 200
console.log(vm)
console.log(vm.msg)
console.log(vm.$data.msg)
任务

将数据对象中count初始值设置为100

通过vm.属性的方式打印以上三个属性

通过 {{ 变量名 }} 的方式将以上三个属性显示在页面上

通过vm.属性 = 赋值的方式，改变 count 为300、msg为"铁蛋儿最帅"、数组为 [1,2,3,4]

9、基础-实例选项-methods

掌握实例选项methods中方法的使用及注意事项

methods其值为一个对象

可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。

方法中的 this 自动绑定为 Vue 实例。

methods中所有的方法同样也被代理到了 Vue实例对象上,都可通过this访问

注意，不应该使用箭头函数来定义 method 函数。理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例
let vm =new Vue({
 el:"#app",
 data:{
     name:"Hello world",
     name2:"Hello world2"
 },
 methods:{
     // 常规函数写法
     fn1:function(){
         console.log(this.name)
         this.fn2()
     },
     // es6 函数简写法
     fn2() {
         console.log(this.name2)
     }
 }
})
任务:

实例化一个Vue实例,

定义两个属性 name1 name2 初始值分别为 Hello world Hello world2

定义两个方法 fn1 fn2 两个方法中分别输出 name1 和 name2的值

路径: 参照代码示例

今天就学到这里了，以下的任务记得完成，下次再见！