vue学习-CSDN博客

本文链接：https://blog.csdn.net/LUSHIJIE__/article/details/112762226

vue学习

一、vue是什么？

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

二、学习vue需要掌握的三大要素

HTML (结构) :超文本标记语言(Hyper Text Markup Language) ，决定网页的结构和内容
CSS (表现):层叠样式表(Cascading Style sheets) ，设定网页的表现样式
JavaScript (行为):是一种弱类型脚本语言，其源代码不需经过编译，而是由浏览器解释运行,用于控制网页的行为

三、vue的使用

1.vue的引入

1.找到一个稳定的cdn网站。
2.使用<script>标签引入vue.js文件

<script src=“https://cdn.bootcdn.net/ajax/libs/vue/2.6.4/vue.min.js”></script>
<script src=“https://cdn.bootcdn.net/ajax/libs/vue/2.6.4/vue.js”></script>

2.基础语法

1.声明式渲染数据——渲染到DOM内

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>(快速入门)声明式渲染数据——渲染到DOM内</title>
</head>
<body>
    <div id="app">
        {{message}}
    </div>
    <!--导入vue.js-->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.5.21/vue.min.js"></script>
    <script>
            var vm = new Vue({
                el:"#app",
                data:{
                    message:"hello vue!"
                }
            })
    </script>
</body>
</html>

2.条件（v-if，v-else-if，v-else）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-if，v-else-if，v-else学习</title>
</head>
<body>
    <!--view层 模板-->
	<div id="app">
	   <h1 v-if="type==='A'">A</h1>
	   <h1 v-else-if="type==='B'">B</h1>
	   <h1 v-else>C</h1>
	</div>
</body>

<!--导入js-->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.5.21/vue.min.js"></script>
<script>
   var vm = new Vue({
       el: "#app",
       data: {
           type: "A"
       }
   })
</script>
</html>

3.循环（v-for）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-for学习</title>
</head>
<body>
    <!--view层 模板-->
	<div id="app">
	   <li v-for="item in items">
        	姓名：{{item.name}}，年龄：{{item.age}}
       </li>
	</div>
</body>

<!--导入js-->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.5.21/vue.min.js"></script>
<script>
   var vm = new Vue({
        el: "#app",
        data: {
            items: [
                {name: "zhangsan", age: 23},
                {name: "lisi", age: 24},
                {name: "wangwu", age: 25}
            ]
        }
    })
</script>
</html>

4.事件绑定（v-on===@）

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>事件处理 v-on示例</title>


</head>
<body>
    <div id="app">
        {{message}}
        <button v-on:click="fun1('abc')">点击改变</button>
    </div>

    <!--    导入vue.js-->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.5.21/vue.min.js"></script>
    <script>
            var vm = new Vue({
                el:"#app",
                data:{
                    message:"hello vue!"
                },
                methods:{
                    fun1:function (msg) {
                        this.message = msg;
                    }
                }
            })
    </script>
</body>
</html>

5.属性绑定（v-bind===:）

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>属性绑定，v-bind学习</title>


</head>
<body>
    <div id="app">
         <span v-bind:title="message">
    		鼠标悬停几秒钟查看此处动态绑定的提示信息！
  		</span>
    </div>

    <!--    导入vue.js-->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.5.21/vue.min.js"></script>
    <script>
            var vm = new Vue({
                el:"#app",
                data: {
				    message: '页面加载于 ' + new Date().toLocaleString()
				}
            })
    </script>
</body>
</html>

6.双向绑定（v-model）

你可以用v-model指令在表单 <input>、<\textarea> 及<\select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但v-model本质上不过是语法糖。它负责监听户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

注意：v-model会忽略所有元素的value、checked、selected特性的初始值而总是将Vue实例的数据(即vue实例里面的data内的数据)作为数据来源，你应该通过JavaScript在组件的data选项中声明。

7.vue组件

组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想，几乎任意类型的应用界面都可以抽象为一个组件树：
在这里插入图片描述
在 Vue 里，一个组件本质上是一个拥有预定义选项的一个 Vue 实例。在 Vue 中注册组件很简单：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>V-model</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.5.21/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <lushijie v-for="item in message" v-bind:abc="item"></lushijie>
    </div>
<script>
	//组件
    Vue.component("lushijie",{
       props:['abc'],					//用于接收v-bind的值，abc类似于绑定数据的别名
       template:'<li>{{abc}}</li>'
    });

    new Vue({
       el:"#app",
        data:{
           message:["A","B","C"]
        }
    });
</script>
</body>
</html>

组件应用模板

<div id="app">
  <app-nav></app-nav>					<!-- 导航栏 -->
  <app-view>							<!-- 视图 -->
    <app-sidebar></app-sidebar>			<!-- 边注栏 -->
    <app-content></app-content>			<!-- 内容 -->
  </app-view>
</div>

8.插槽（slot）

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>slot插槽</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.5.21/vue.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>

</head>
<body>

    <div id="app">
        <todo>
            <todo-title slot="todo-title" v-bind:name="title"></todo-title>
            <todo-items slot="todo-items" v-for="item in todoItems" v-bind:item="item"></todo-items>
        </todo>
    </div>
<script type="text/javascript">
    //slot 插槽 这个组件要定义在前面不然出不来数据
    Vue.component("todo", {
        template: '<div>\
                <slot name="todo-title"></slot>\
                <ul>\
                <slot name="todo-items"></slot>\
                </ul>\
                <div>'
    });
    Vue.component("todo-title", {
        //属性
        props: ['name'],
        template: '<div>{{name}}</div>'
    });
    Vue.component("todo-items", {
        props: ['item'],
        template: '<li>{{item}}</li>'
    });
    var vm = new Vue({
        el: "#app",
        data: {
            //标题
            title: "图书馆系列图书",
            //列表
            todoItems: ['三国演义', '红楼梦', '西游记', '水浒传']
        }
    });
</script>
</body>
</html>

9.异步通信axios

Axios是一个开源的可以用在浏览器端和NodeJS 的异步通信框架，她的主要作用就是实现AJAX异步通信，其功能特点如下:

从浏览器中创建XMLHttpRequests
从node.js创建http请求
支持Promise API [JS中链式编程]
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换JSON数据
客户端支持防御XSRF (跨站请求伪造)
减少对DOM的操作（优于JQuery的ajax）

模拟json数据：

{
  "name": "lsj",
  "age": "21",
  "sex": "男",
  "url":"https://www.baidu.com",
  "address": {
    "street": "xxx",
    "city": "福州",
    "country": "中国"
  },
  "links": [
    {
      "name": "bilibili",
      "url": "https://www.bilibili.com"
    },
    {
      "name": "baidu",
      "url": "https://www.baidu.com"
    },
  ]
}

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>axios异步通信</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.5.21/vue.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>

    <style>
        /*提高用户体验，避免用户网络不好的时候加载看到{{xxx}}的情况*/
        [v-clock]{
            /*设置白屏*/
            display:none;
        }
    </style>
</head>
<body>

    <div id="app" v-clock>
        <div>{{abc.name}}</div>
        <div>{{abc.address}}</div>                             <!--输出的是json数据-->
        <div>{{abc.address.city}}</div>
        <a v-bind:href="abc.links[0].url">点击我</a>
    </div>
<script type="text/javascript">
    new Vue({
        el:"#app",
        //data  vue的属性
        data:{
            //请求的返回参数合适，必须和json字符串一样，如果需要显示的就必须写上，不需要显示的可以不用写
            // abc为自定义的数据的名（只要和(this.abc=response.data)中的this.xxx一致即可）
            abc:{
                name:null,
                address:{
                    city:null
                },
                links:[
                    {
                        url: null
                    },
                    {
                        name: null,
                        url:null
                    }
                ]
            }
        },
        //data()  方法
        // data(){
        //     return{
        //         info:{
        //             name:null,
        //             address:{
        //                 city:null
        //             },
        //             links:[
        //                 {
        //                     url: null
        //                 },
        //                 {
        //                     name: null,
        //                     url:null
        //                 }
        //             ]
        //         }
        //     }
        // },
        mounted(){      //钩子函数      链式编程    （=>）是ES6新特性
            axios.get('../data.json').then(response=>(this.abc=response.data));
        }
    });
</script>
</body>
</html>

10.自定义事件内容分发

通过以上代码不难发现，数据项在Vue的实例中，但删除操作要在组件中完成，那么组件如何才能删除Vue实例中的数据呢?此时就涉及到参数传递与事件分发了，Vue为我们提供了自定义事件的功能很好的帮助我们解决了这个问题;

使用this.$emit (‘自定义事件名’,参数)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
<div id="app">

    <a href="www.baidu.com">a标签</a>

    <!--vue的视图层       在vue的视图层中只能使用自定义组件，不能使用传统的标签-->
    <todo>
        <a href="www.baidu.com">a标签</a>             <!--无效，不报错-->
        <todo-title slot="todo-title" v-bind:name="title"></todo-title>
        <todo-items slot="todo-items" v-for="(item,index) in todoItems" v-bind:item="item"
                    v-bind:index="index" v-on:remove1="removeItems(index)"></todo-items>
    </todo>
</div>

<!--1.导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    //slot 插槽 这个组件要定义在前面不然出不来数据
    Vue.component("todo", {
        template: '<div>\
                <slot name="todo-title"></slot>\
                <ul>\
                <slot name="todo-items"></slot>\
                </ul>\
                <div>'
    });
    Vue.component("todo-title", {
        //属性
        props: ['name'],
        template: '<div>{{name}}</div>'
    });
    Vue.component("todo-items", {
        props: ['item','index'],
        template: '<li>{{index}}---{{item}} <button @click="remove">删除</button></li>',
        methods: {
            remove: function (index) {
                // this.$emit 自定义事件分发
                this.$emit('remove1',index)
            }
        }
    });
    let vm = new Vue({
        el: "#app",
        data: {
            //标题
            title: "图书馆系列图书",
            //列表
            todoItems: ['三国演义', '红楼梦', '西游记', '水浒传']
        },
        methods: {
            removeItems: function (index) {
                console.log("删除了"+this.todoItems[index]+"OK");
                //splice方法----------->从index位置移出1一个元素
                this.todoItems.splice(index,1);
            }
        }
    });
</script>
</body>
</html>

四、vue-cli

1. 什么是vue-cli

vue-cli 官方提供的一个脚手架,用于快速生成一个 vue 的项目模板;

预先定义好的目录结构及基础代码，就好比咱们在创建 Maven 项目时可以选择创建一个骨架项目，这个骨架项目就是脚手架,我们的开发更加的快速;

 主要功能：

统一的目录结构
本地调试
热部署
单元测试

需要的环境

Node.js : http://nodejs.cn/download/
安装就无脑下一步就好,安装在自己的环境目录下
Git : https://git-scm.com/downloads
镜像:https://npm.taobao.org/mirrors/git-for-windows/

确认nodejs安装成功:

cmd 下输入 node -v,查看是否能够正确打印出版本号即可!
cmd 下输入 npm-v,查看是否能够正确打印出版本号即可!
这个npm,就是一个软件包管理工具,就和linux下的apt软件安装差不多!

npm 是 JavaScript 世界的包管理工具,并且是 Node.js 平台的默认包管理工具。通过 npm可以安装、共享、分发代码,管理项目依赖关系。

安装 Node.js 淘宝镜像加速器（cnpm）

这样子的话,下载会快很多~

 -g 就是全局安装
npm install cnpm -g

 若安装失败，则将源npm源换成淘宝镜像
 因为npm安装插件是从国外服务器下载，受网络影响大
npm config set registry https://registry.npm.taobao.org

 然后再执行
npm install cnpm -g

默认安装的位置:C:\Users\Administrator\AppData\Roaming\npm

可以修改安装位置：
1.配置npm下载依赖的位置

npm config set cache “D:\nodereps\npm-cache”
npm config set prefix “D:\nodereps\npm_global”

3. 安装vue-cli

#在命令台输入
cnpm install vue-cli -g
#查看是否安装成功
vue list

4. 第一个 vue-cli 应用程序

创建一个Vue项目,我们随便建立一个空的文件夹在电脑上。

创建一个基于 webpack 模板的 vue 应用程序

#这里可以根据自己的需求起名
vue init webpack 项目名

一路都选择no即可;（如果你是vue的老用户，则可以根据需求来选择。建议选择no是为了能够让初学者了解创建步骤。）

初始化并运行

cd myvue
npm install
npm run dev

执行完成后,项目下多了一个node_modules目录，且目录下多了很多依赖。如下图：
在这里插入图片描述

vue学习

vue学习

文章目录

一、vue是什么？

二、学习vue需要掌握的三大要素

三、vue的使用

1.vue的引入

2.基础语法

1.声明式渲染数据——渲染到DOM内

2.条件（v-if，v-else-if，v-else）

3.循环（v-for）

4.事件绑定（v-on===@）

5.属性绑定（v-bind===:）

6.双向绑定（v-model）

7.vue组件

组件应用模板

8.插槽（slot）

9.异步通信axios

10.自定义事件内容分发

四、vue-cli

1. 什么是vue-cli

3. 安装vue-cli

4. 第一个 vue-cli 应用程序