Vue纯零基础教学第一天--到走入Vue项目实际开发的内心深处-CSDN博客

看好了是零基础我每个步骤都教你我把饭都喂到你嘴里。

自诉：自己这几天看了好多手摸手教学vue 等项目，发现并不适合新手开始学习，会导致大家觉得vue很难深入了解，正好我最近也要开始VUE 项目。不如就让我在做一回领路人。有基础底子厚的前几天你直接走，看都别看。往后几天观摩交流学习。我的零基础就是你坐好，我把饭都喂到你嘴里这种。

下面给大家讲的课记住没有一句废话，全都是重点全都是！！！因为我自己一步一步走来知道自学有多难，所以我教你们。不是我有多厉害，是我愿意奉献

关于gitHub的详细使用我会在以后专门出一篇文章讲解github

学习安排如下

1、前三天讲解什么是vue 和结合官方文档讲解API方法。

2、后几天开始结合项目讲让我们自己搭建一个后台系统，这个项目是当年我开发的一个具体就不太方便说了

先来拜帖 VUE 开发者中国人：尤雨溪 twitter:Evan You 开发官网：cn.vuejs.org/

开始正课

Vue.js  就是框架 前端js 框架 jQuery是库
框架：提供了基础服务，不需要自己调用
库：需要我们自己调用API  

最大程度解放了DOM 操作 数据驱动 MVVM  单页应用就是SPA 

目前前端三大主流框架 React  angular  Vue  我后面都会逐一讲解 
复制代码

Vue 可以开发单页应用叫SPA 和传统网站

VUE 核心重点

通过制定 扩展了 HTML 通过表达式绑定数据到 HTML
1、MVVM model 模型 view 视图 数据驱动视图
2、组件化 封装视图 Components  
3、虚拟DOM   
4、灵活渐进式
5、简单易用 
6、轻量操作
复制代码

1、 Vue 起步

1、安装Vue 官方网站三种 安装 方法 
解答：我们这里只用一种就是 npm 通过命令行下载，要想使用npm  前提去(Node.js官网下载好Node安装好)
    1、下载node.js 
2、这里 我使用的编辑器是vscode 建议你们下载一个 然后使用里面的命令行
    2、下载编辑器  然后创建文件夹啥的就不用交了吧
    
3、开始创建vue 项目 init-y 是初始化 
    3、sudo npm init -y  因为我是Mac 原因需要加权限 管理 
    
4、 sudo npm i vue
    4、安装vue安装包 
复制代码

5、然后我们就能看到我截图这里的项目目录，然后你自己手动创建一个helloworld.html 的文件我们开始写项目看第六步

6、开始我们第一个 message 提示

7、讲解

现在我们来讲解代码里面都是啥
  new Vue 是 new 一个实例对象
  new Vue({
    选项讲解 
    el:'',  
    data:{}
		
  })

  el:可以是css选择器。也可以是一个HTMLElement实例
  提供一个在页面上已存在的DOM 元素作为Vue 实例的挂载目标就是vue实例产生的作用范围
  上面获取到的#app 就是 vue的实例作用范围  
复制代码

8、data 讲解两种方式来访问 data里面的数据

        <body>
          <!-- 下面这个 div 就是vue 实例对象作用的范围   -->
          <div id="app"></div>
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
        <script>
            // 实例化 vue 对象
         new Vue({
            //   设置vue实例对象的选项 el是css 选项
                el:"#app",
            // data vue实例的数据对象 能够响应式数据变化 双向绑定
            // 可以通过vm. $data 访问到原始数据对象
            // vue实例也代理data 对象上所有的属性 因此访问vm.a 等价于 访问 vm.$data.a
            // 视图中绑定的数据必须显试的初始化到data 中
            
                data:{}
            })
        </script>
      </body>
复制代码

9、methods 方法

// methods是一个方法，里面是对象 里面也 key 和value
// methods将被混入到vue 实例中
// 可以直接通过vm 实例访问这些方法，或者在指令表达式中使用
// 方法的this 自动绑定为 vue 实例 在不应该使用箭头函数来定义 method函数，
// 因为箭头函数绑定了作用域的上下文，所以 this 将不会按照望指向vue实例 将会是 undefined
methods: {
复制代码

10、插值表达式 {{两个双大括号}} 也叫胡子语法

注意：在引入cdn 的时候测试一下代码就得自己写，这里我只展示图片

2、指令

vue 通过指令来扩充了HTML 然后通过表达式将数据绑定到HTML

指令是v- 前缀的特殊性，指令期待的是单个 js 表达式当表达式的值改变时，将其产生的连带影响响应式的作用域DOM 数据变了就会更改

        指令 v- 书写位置在开头
        位置写在开始标签中
        值:大多数是js表达式
复制代码

常用指令

指令 
复制代码

v-text 和 v-html

 v-text和插值表达式的区别
 v-text 更新整个标签中的内容，差值表达式：更新标签中局部的内容,不能渲染识别标签
 v-html 更新标签中的内容/标签 可以渲染内容中的html 标签注意v-html 不常用有被跨站攻击的危险 
复制代码

v-if 和 v-show

if是如果的意思，
show显示
作用：根据表达式的bool 值进行判断是否渲染该标签
复制代码

v-if 和 v-show 的差别
v-show 本质是通过改变标签 display 属性的值
使用注意：频换切换使用v-show 
复制代码

v-for 列表渲染数组和对象

第一个是渲染数组DEMO

根据一组数据或对象的选项列表进行渲染

v-for 指令需要使用 item in items 形式的特殊语法
items 是源数据数组
复制代码

v-for 列表渲染比较特殊
item:是指的是数组中每个元素
items：指的是数组名
作用：每有一个元素，就渲染一次标签 ，你先别管:key是啥
<p v-for="item in items" :key="item.id">{{ item }}</p>
复制代码

第二个是渲染对象DEMO

  <!-- v-for 列表渲染 遍历对象 -->
  <p v-for="item in obj">{{ item }}</p>
  <hr />
  <!-- in 前面写一个参数时 指的是对象中每一个key的值 -->
  <p v-for="value in obj">{{ value }}</p>
  <hr />
  <!-- in 前面用括号 括起来之后 里面显示的是属性 和值 key 和 value -->
  <p v-for="(el,i) in obj">{{ el }}---{{ i }}</p>
复制代码

key的值 v-for="item in items" :key="item.id"

<p v-for="(el,i) in datas">{{ el.sex }}</p> 这里可以给两
复制代码

v-on 绑定事件

  <p @click="fn1">简写方式</p>
  <!-- 
       2、 @事件名字.修饰符 = methods中的方法名 
        once 就是修饰符的一种，作用是当前事件只能触发一次
        还有很多修饰符参考vue 
    -->
  <p @click.once="fn1">修饰符只能执行一次</p>
  <!-- 
      4、 把当前事件对象 传给方法
       方法形参位置的$event 指的就是当前的事件对象  
    -->
  <p @click="fn4($event)">事件传给方法</p>
复制代码

v-bind 与简写形式

v-bind: 可以绑定标签的任意属性(重要)
也区分，对象和数组的语法 上面演示的是 对象的写法
v-bind:class 这样绑定了标签的属性
<div v-bind:class="{ active: isActive }"></div>
isActive 这个来源于data 数据为真才有 因为data数据是一个bool 值
如果isActive 的值是true actice 类名就会赋值给class 否则就是不会
这里就会发现 actice 是一个标签的类名给增加了颜色
v-bind的简写形式是 :class  :src 等等.....
解答：第一个截图是 v-bind 使用css 的样式 
复制代码