Vue快速简单入门

vue基础

1.vue单文件方式及启动

单文件就是以.vue结尾的文件。最终通过webpack也会编译成*.js在浏览器运行
*内容：++
-1:template中只能有一个根节点
-2:script中按照export default{配置}来写
-3:style中 可以设置scope属性，让其只在template中生效

index.html：相当于坑，之后vue编译好的代码往里面插入
main.js :
//引入vue  
import Vue from ‘vue’;
import App from './app.vue';
//创建一个VUe实例，一般一个项目，大多都是一个vue实例来完成显示的  
new Vue({
    //el:'#app',//目的地
    //render:'dom结构' 渲染的内容   
    el:'#app',
    render:function(creater){
        return creater(App);//App包含template、scirpt、style，最终生成Dom结构 
    }
)

*单文件启动
webpack找人来理解你的单文件代码
-vue-loader，vue-template-compiler，代码中依赖vue

2.项目目录的解读

src：存放可以看的懂的源代码，具备一定的功能划分，Mvc
dist：存放真实上线的代码（减少请求，混淆代码），机器能看懂
webpack.config.js 打包生成dist下的代码
package.json 文件 包信息描述

3.vue介绍

核心概念：组件化 双向数据流（基于Es5中的defineProperty来实现的）IE9才实现
组件：组合起来的一个部件（头部，底部，中部）
细分代码
+头部：页面，样式，动态效果
+代码：template style script

4.vue中常用的v-指令演示

v-text:
v-html:
v-if:
v-show:
v-moudel

5.子组件通信

*通过new VUe（）这样的一个对象，来$on{(}^{\prime }事件{名}^{\prime },fn(prop1,pro2))\ast 另一个组件引入同一个vuebus,来$emit(‘史建民’,prop1,pro2)

6.过滤器

*content |过滤器，vue中没有提供相关的内置过滤器，可以自定义过滤器
*组件内的过滤器+全局过滤器
-组件内过滤器 + 全局过滤器
+多个key就是不同过滤器名，多个value就是与key对应的过滤方式函数体
-vue。filter(名，fn)
全局：范围大，如果出现同名时，权力小
组件内：如果出现同名时，权力大，范围小
+显示：{{text| myFilter}}
+filters:{
myFilter:function(value){
return value.split(’’).reverse().join(’’)
}
},

7.获取dom元素

*在指定的元素上，添加ref=“名称A”
*在获取的地方加入this.$refs.名称A-如果ref放在了原生DOM元素上，获取的数据就是原生DOM对象-如果ref放在了组件对象上，获取的就是组件对象+1：获取到DOM对象，通过this.$refs.sub.$el,进行操作
-对应的事件
-created 完成了数据的初始化，此时还未生成DOM，无法操作DOM
+mounted 将数据已经装载到了DOM之上，可以操作DOM

8.vue-router

*前端路由，核心就是锚点值的改变，根据不同的值，渲染指定DOM位置的不同数据
*ui-router ：锚点值改变，如何获取模板？ajax
*vue中，模板数据不是通过ajax请求来，而是调用函数来获取到模板内容
*核心：锚点值改变
*以后看到vue开头，就知道必须vue.use
*vue的核心插件：
-vue-router路由
-vuex管理全局共享数据
*使用方式
-下载： vue-router官网找
2.在main.js中引入:import VueRouter from ‘vue-router’;
3.安装插件 vue.use(VueRouter)
4.创建路由对象并配置路由规则
+let router new VueRouter({router:[{path:’/home’,component:Home}] });
5将其路由对象传递给vue的实例，option中
+ options中加入router:router
6.在app.vue中留坑

9.命名路由

*需求： 通过a标签，做页面数据的跳转
*使用router-link标签
- 1：去哪里 去北京
- 2: 去哪里 去北京
+更利于维护，如果修改了path，只修改路由配置中的path，该a标签会根据修改后的值生成href属性

10.参数router-link

*在vue-router中，有两大对象被挂载到了实例this
*$route(只读，具备信息的对象)、$router(具备功能函数)
*查询字符串
-1：去哪里 xxxx
-2: 导航（查询字符串path不用改）{name:‘detail’,path:’/detail’,组件}
-3：去了干吗，获取路由参数（要注意时query还是parms和对应id名）
+ this.$route.query.id\ast path方式-1：去哪里<router-link:to="name{:}^{\prime }deati{l}^{\prime },params:name:1">xxxx</router-link>-2:导航（path方式需要在路由规则上加上/:xxx）name{:}^{\prime }detai{l}^{\prime },path{:}^{\prime }/:nam{e}^{\prime },组件-3：去了干吗，获取路由参数（要注意时query还是parms和对应name名）+this.$route.params.name

11.404

-1: {path:'*',component:'/Notfindvue'    

12.多视图

一次行为=一个坑+一个路由+一个组件
一次性为=多个坑+一个路由+多个组件
components 多视图是一个对象，对象内多个key和value
-key对应视图的name属性
-value就是要显示的组件对象
-1：


main.js:
routs:[
{path:’/’,components:{//components一定要加s因为有多个坑
header:headervue,//header为router-view 中的name
default:footervue,//default默认为没有那个name的router-view
footer:footervue
}}
]

1.Fetch请求

js部分

new Vue({
    el:'#vue-app',
    data(){
        return{
            todos:[],
            todo:{
                title:'',
                completed:false
            }
        };
    },
    mounted(){//mounted的作用：在项目渲染之前加载的函数
        //fetch api请求接口
        fetch("https://jsonplaceholder.typicode.com/todos")

        .then(res=>{
            return res.json();//固定写法
        })
        .then(todos=>{
            this.todos=todos;//得到这个接口数据后，赋值给vue的数据属性todo s
        })
    },
    methods:{
        // fetch实现post请求
        onSubmit(){
            fetch('https://jsonplaceholder.typicode.com/todos',{
                method:'POST',//实现其他请求更改名字即可
                body:JSON.stringify(this.todo),
                headers:{
                    'Content-type':'application/json'
                }
            })
            .then(res=>{
                return res.json();
            })
            .then(todo=>{
                this.todos.unshift(todo);
            });
        }
    }
});   

html部分

<h1>Fetch请求</h1>
    <div id="vue-app">
        <!--post请求 -->
        <form @submit="onSubmit">
            <input type="text" v-model="todo.title"/>
            <input type="checkbox" v-model="todo.completed"/>
            <input type="submit" value="提交"/>
        </form>
        <ul>
            <li v-for="todo in todos">
                <h1>{{todo.title}}</h1>
                <p v-if="todo.completed">{{todo.completed}}</p>
            </li>
        </ul>  
    </div>   

2.Axios请求

js部分

new Vue({
    el:'#vue-app',
    data(){
        return{
            todos:[],
            todo:{
                title:'',
                completed:false
            }
        };
    },
    mounted(){  //mounted的作用：在项目渲染之前加载的函数
        //axios get请求接口
        axios.get('https://jsonplaceholder.typicode.com/todos')//.../todos1后面加的数字代表ID
        .then(res=>{
            this.todos=res.data ;
        })
    },
    methods:{
        onSubmit(){
            //axios实现post请求 
            axios  
            .post('https://jsonplaceholder.typicode.com/todos',
            this.todo)
            .then(res=>{
                this.todos.unshift(res.data);
            })
        }
    }
});   

html部分

 <h1>Axios请求</h1>
    <div id="vue-app">
        <!--post请求 -->
        <form @submit="onSubmit">
            <input type="text" v-model="todo.title"/>
            <input type="checkbox" v-model="todo.completed"/>
            <input type="submit" value="提交"/>
        </form>
        <ul>
            <li v-for="todo in todos">
                <h1>{{todo.title}}</h1>
                <p v-if="todo.completed">{{todo.completed}}</p>

            </li>
        </ul>  
    </div>  

3.vue安装脚手架教程

一、脚手架需要的环境
1.Node.js 运行环境
安装步骤：在官网上下载👉https://nodejs.org/zh-cn/或者在电脑应用市场上下载
2.npm(node package manage)依赖包 （node.js安装时自带的依赖包）;
3.测试是否安装成功：
在cmd中输入 node -v 看是否有版本号，接着输入 npm -v ，看是否有版本号。
二、安装脚手架
1.打开cmd窗口输入：npm install -g @vue/cli
2.测试脚手架是否安装成功：vue --version
三、安装淘宝镜像
1.打开cmd窗口输入：npm install -g cnpm --registry=https://registry.npm.taobao.org
2.测试是否安装成功：cnpm --version
四、安装webpack
webpack是当前前端最热门的前端资源模块化管理和打包工具。
1.打开cmd输入：npm install webpack -g（-代表全局安装）
2.输入webpack -v是否安装成功。

4.配置文件属性的使用

1.webpack属性配置

    moudule.exports={
        entry:{      //main是默认入口，也可以是多入口
            main:'./src/main.js'
        },  
        //出口  
        output:{
            filename:'.build.js',   //指定js文件  
            path:path.join(_dirname,'..','dist',)   //最好是绝对路径
            //代表当前目录的上一级的dist
            
        },
        module:{
            //一样的功能rules: webpack2.x之后新加的
            loaders:[       require('./a.css||./a.js')
                {
                    test:/\.css$\/,
                    loader:'style-loader!css-loader',   //多个loader用！分割
                    //顺序是反过来的2！1
                    
                },
                {
                    test:/\.(jpg|svg)$/,
                    loader:'url-loader?limit=4096&name=[name].[ext]',   //多个参数用&分割
                    //顺序是反过来的2！1
                    //[name].[ext] 内置提供的，因为本身是先读这个文件
                    option:{
                        limit:4096,
                        name:'[name].[ext]'
                    }
                }
            ]
        },
        plugins:[
            //插件的执行顺序是依次执行的
            new htmlWebpackPlugin({
                template:'./src/index.html' 
            })
            //将src下的template属性描述的文件根据当前配置的output.path,
            //将文件移动到该目录
        ]
    }


## 6.vue阶段总结
### 问题：  
#### 1.脚手架安装   
一、脚手架需要的环境  
1.Node.js 运行环境   
安装步骤：在官网上下载👉https://nodejs.org/zh-cn/或者在电脑应用市场上下载  
2.npm(node package manage)依赖包 （node.js安装时自带的依赖包）;
3.测试是否安装成功：
在cmd中输入 node	-v  看是否有版本号，接着输入 npm -v  ，看是否有版本号。
二、安装脚手架  
1.打开cmd窗口输入：npm install -g @vue/cli  
2.测试脚手架是否安装成功：vue --version  
三、安装淘宝镜像 
1.打开cmd窗口输入：npm install -g cnpm --registry=https://registry.npm.taobao.org  
2.测试是否安装成功：cnpm --version   
四、安装webpack  
webpack是当前前端最热门的前端资源模块化管理和打包工具。  
1.打开cmd输入：npm install webpack -g（-代表全局安装）
2.输入webpack -v是否安装成功。
#### 2.注册组件   
一·注册全局组件   
进入main·js，导包：import idefinition from "xxxx/xxx.vue" 
创建组件：Vue·component（id，idefinition）  
在任何组件使用时直接在html中加入<id/>   
二·注册局部组件    
1.单独声明组件。用js 对象注册组件   

var ComponentA = {
template:<p>注册一个组件aaaa</p>
}

var ComponentB = {emplate:<p>注册一个组件bbb</p> }
var ComponentC = { /* … */ }

new Vue({
el: ‘#app’,
components: {
‘com-A’: ComponentA,
‘com-B’: ComponentB
}
})

在挂载的元素中使用组件  

``` 2.直接在实例中components属性中注册：然后在挂载的根元素中使用 在main.js文件导入每个你想使用的组件 import Base from './Base.vue' 在使用的组件的js： export dafault{ components:{ Base } } Html： #### 3.router使用方式 1.安装vue-router 模块 cnpm install vue-router --save 2.在main·js中引用并使用vue-router模块 import VueRouter from 'vue-router' Vue.use(VueRouter) 3.创建路由地址分离routes文件 ``` import default[ {path:'/',components:ShowBlogs}, {path:'/',components:AddBlog}, ] ``` 4.设置路由模块设置mode去掉浏览器地址后面的#号 ``` import Routes from './routes' const router= new VueRouter({ routes:Routes, mode:'history' })

new Vue({
el:’#app’,
render: h=>h(App),
router:router
})

5.在app.vue中设置router-view  

``` 6.设置router-link地址 ``` xxx xx 去北京 ``` 7.router-link * 在vue-router中，有两大对象被挂载到了实例this * $route(只读、具备信息的对象)、$router(具备功能函数) * 查询字符串 - 1:去哪里 `xxx` - 2:导航(查询字符串path不用改) `{ name:'detail' , path:'/detail',组件}` - 3:去了干嘛,获取路由参数(要注意是query还是params和对应id名) + `this.$route.query.id` * path方式 - 1:去哪里 `xxx` - 2:导航(path方式需要在路由规则上加上/:xxx) - `{ name:'detail' , path:'/detail/:name',组件}` - 3:去了干嘛,获取路由参数(要注意是query还是params和对应name名) + `this.$route.params.name`

4.路由器添加点击事件

在路由器中添加点击事件必须加上·native修饰符

5.渲染数据去重

1.存储数据时，添加一个特殊属性值当作标记（最好是布尔类型）
存储时为true ，当获取相同的数据时，修改该属性为false
在渲染时，根据该属性进行的真假进行显示

知识点总结

6.生命周期图示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YAq9clkl-1601791735705)(https://note.youdao.com/favicon.ico)]

7.动态参数：

<a v-bind:[attributeName]=“url”>…
如果你的 Vue 实例有一个 data 属性 attributeName，其值为 “href”，那么这个绑定将等价于 v-bind:href

8.修饰符：

修饰符 (modifier) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：

10.computed属性和watch属性

1.computed

<div class="test">
   <p>原始的信息{{message}}</p>
   <p>计算后的信息{{ComputedMessage}}</p>
 </div>
js代码
var myVue = new Vue({
   el: ".test",
   data: {
     message:12
   },
   computed:{
     ComputedMessage:function () {
       return this.message+10;
     }
   }
 });
界面会显示 12 和 22
上述的方式是一种缓冲的实现的效果，这种实现的方式依赖于它的缓寸，计算得到的属性只有在相关依赖（message）改变的时候才会重新取值，这就意味着只要message没有发生改变的时候，多次访问ComputedMessage都不会再重新执行计算的这个属性。

2.watch

<div class="test">
  <p>原始的信息{{fullName}}</p>
  <button @click="fu">test</button>
</div> 
js代码  
var myVue = new Vue({
   el: ".test",
   data: {
     firstName:"fur",
     lastName:"bool",
     fullName:"sasas dsdsd dsds"
   },
   computed:{
     fullName:{
       get:function () {
         console.log("get")
         return this.firstName+this.lastName
       },
       set:function(value){
         var names=value.split(" ");
         this.firstName=names[0];
         this.lastName=names[names.length-1];
         console.log("set");
       }
     }
   },
   methods:{
     fu:function () {
       myVue.fullName="sasas dsdsd dsds";
       console.log(myVue.firstName);   //sasas
       console.log(myVue.lastName);  //dsds
     }
   }
 });

首先会输出get；
在点击按钮为fullName赋值的时候首先调用set 再调用get方法。

11.Class和style绑定

操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。
1.第一种方法：

v-bind:class="{a:b,c:b}"     a c 代表CSS样式表里相应的样式名       b 代表true(启用此样式)/false(不启用此样式)  

html

    <!--vue-app是根容器-->
    <div id="vue-app">
        <input type="button" v-on:click="a=!a" v-bind:class="{changeColor:a,changeWidth:a}" value="change!">
    </div>

css

.changeColor{
    background: brown;
    color: #ffffff;
}
.changeWidth{
    width: 200px;
}

css

.changeColor{
    background: brown;
    color: #ffffff;
}
.changeWidth{
    width: 200px;
    
}

js

new Vue({
    el:"#vue-app",
    data:{
        a:false
    },
    methods:{},
    computed:{}
});

2.第二种方法

<!--vue-app是根容器-->
    <div id="vue-app">
        <input type="button" v-on:click="a=!a" v-bind:class="change" value="change">
    </div>
//实例化vue对象
new Vue({
    el:"#vue-app",
    data:{
        a:false
    },
    methods:{},
    computed:{
        change:function(){
            return {
                changeColor:this.a,
                changeWidth:this.a
            }
        }
    }
});

11.组件通信

porps/$emit方式父组件通过props的方式向子组件传递数据，而通过$emit子组件可以向父组件通信
1.父组件向子组件传值
通过一个例子说明父组件如何向子组件传递数据：在子组件article.vue中如何获取父组件
section.vue中的数据 articles:[‘红楼梦’，‘西游记’,‘三国演义’]

// section父组件
<template>
  <div class="section">
    <com-article :articles="articleList"></com-article>
  </div>
</template>

<script>
import comArticle from './test/article.vue'
export default {
  name: 'HelloWorld',
  components: { comArticle },
  data() {
    return {
      articleList: ['红楼梦', '西游记', '三国演义']
    }
  }
}
</script>

// 子组件 article.vue
<template>
  <div>
    <span v-for="(item, index) in articles" :key="index">{{item}}</span>
  </div>
</template>

<script>
export default {
  props: ['articles']
}
</script>
总结：prop只可以从上一级组件传递到下一级组件（父子组件），即所谓的单向数据流。而且prop只读，不可被修改，所有修改都会失效并警告。

2.子组件向父组件传值
// 父组件中

//子组件

12.ajax请求

vue本身不支持ajax请求，需要使用“axios”的第三方插件，axios是基于promise的http请求客户端，用来发送请求，是Vue2.0推荐使用的，同时不再对vue-resource进行更新和维护。也可以使用vue-resource进行跨域请求。
axios的安装和使用
通过npm安装和直接引用其js文件；
基本使用：
a·可以在methods中定义一个方法来调用axios（）方法 ；
b·使用axios（【options】）方法，axios（【options】）.then(function(respon){}).catch(function(error){}),
在这里.then就是成功后要做的事情，responce就是成功后 返回的对象（数据就在这个对象里），catch就是失败的时候要做的事情，error就是错误后返回的错误信息对象
c.使用axios.get（url[,options]）方法；
get传参方式：
1.直接拼接在url后面（不建议）；
2.在params的选项传参（options中的一个选项params，是一个对象）
d.使用axios·post（url，data，【options】)方法；
axios.post（url,jsonData,{                                 transformRequest：[                                 function(data){                                         <!-- 这里的data就是前面的jsonData -->                                         在这里进行手动拼接成“键值对”字符串，并返回                                     }                                 ]                             }[options]）