Vue 基础

最新推荐文章于 2024-06-28 18:39:53 发布

会移动的树~

最新推荐文章于 2024-06-28 18:39:53 发布

阅读量829

点赞数 16

分类专栏：前端文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_59740242/article/details/134877655

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

开发商：尤雨溪

是一套用于构建用户界面的渐进式框架，Vue被设计为可以自底向上逐层开发、Vue核心只关注视图层

Soc:关注点分离原则

HTML+CSS+JS：视图：给用户看，刷新后台给的数据

特色：虚拟Dom

网络通信：axios

页面跳转：vue-router

状态管理：vuex

VUE

第一个vue程序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--view层:模板-->
<div id="app">
    {{message}}
</div>

<!--1.导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var vm = new Vue({
            el:"#app",
           //Model:数据
            data :{
                message:"hello vue!"
            }
       });
</script>


</body>
</html>

<!--view层:模板-->
<div id="app">
    <span v-bind:title="message">
        鼠标悬停几秒钟查看动态绑定的提示信息!
    </span>

</div>

<!--1.导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var vm = new Vue({
            el:"#app",
           //Model:数据
            data :{
                message:"hello vue!"
            }
       });
</script>

v-bind等等被称作指令，指令带有前缀v-，以表示它们是Vue提供的特殊特性。可能你已经猜到了，它们会在渲染的Dom上应用特殊的响应式服务，在这里，该指令的意思是：将元素节点的title特性和Vue实例的messgae属性保持一致。

判断，循环

v-if

v-else

 <div id="app">
     <h1 v-if="type==='A'">A</h1>
     <h1 v-else-if="type==='B'">B</h1>
     <h1 v-else-if="type==='D'">D</h1>
     <h1 v-else>C</h1>
 </div>
 
 <!--1.导入Vue.js-->
 <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
 <script>
     var vm = new Vue({
       el: "#app",
       data:{
           type:'B'
       }
     });
 </script>

for

 <div id="app">
     <li v-for="item in items">
         {{item.message}}
     </li>
 </div>
 
 <!--1.导入Vue.js-->
 <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
 <script>
     var vm = new Vue({
         el: "#app",
         data:{
             items:[
                 {message:'南海有鸢'},
                 {message: '会移动的树'},
                 {message: 'go'}
             ]
         }
     });
 </script>

Vue绑定事件

可以用v-on指令监听Dom事件

<div id="app">
    <button v-on:click="sayHi">click Me</button>
</div>

<!--1.导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data:{
            message: "南海有鸢"
        },
        methods:{  //方法必须定义在Vue的Method对象中,v-on:事件
            sayHi: function (){
                alert(this.message);
            }
        }
    });
</script>

Vue双向绑定

vue.js是一个MVVM框架，即数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。

<div id="app">
<!--    输入的文本:<input type="text" v-model="message"> {{message}}-->
<!--    <textarea v-model="message"></textarea>-->
<!--    {{message}}-->

<!--     性别：-->
<!--    <input type="radio" name="sex" value="男" v-model="gb" >男-->
<!--    <input type="radio" name="sex" value="女" v-model="gb">女-->
<!--    <p>-->
<!--        选中了谁:{{gb}}-->
<!--    </p>-->
    下拉框:
    <select v-model="selected">
        <option value="" disabled>--请选择--</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>

    <span>value : {{selected}} </span>

</div>

<!--1.导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data:{
            selected: ''
        }
    });
</script>

注意：

v-model会忽略所有表单元素的value，checked，selected特性的初始值而总是将Vue实例的作为数据作为数据来源。
如果v-model表达式的初始值未能匹配任何选项，<select>元素将被渲染为”未选中“的状态，在IOS中，这会使用户无法选择第一个选项。因为这样的情况下，IOS不会触发change事件，因此，更推荐像上面这样提供一个值为空的禁用选项。

Vue组件

定义：组件是可复用的Vue实例，说白了就是一组可以重复使用的模板。

<div id="app">
    <!--组件：传递给组件中的值：prop来接收-->
    <gongbo v-for="item in items" v-bind:gb="item"></gongbo>
</div>


<!--1.导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    //定义一个vue组件
    Vue.component("gongbo",{
        props: ['gb'],
        template:'<li>{{gb}}</li>'
    });

    var vm = new Vue({
        el: "#app",
        data: {
            items: ["java","linux"]
        }
    });
</script>

Vue生命周期

Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载 DOM、渲染→更新→渲染、卸载等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue 实例从创建到销毁的过程，就是生命周期。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--解决闪烁问题-->
    <style>
        [v-clock]{
            display: none;
        }
    </style>

</head>
<body>

<div id="vue" v-cloak>
    <div>{{info.name}}</div>
    <div>{{info.address}}</div>

    <a v-bind:href="info.url">点击</a>
</div>


<!--1.导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script type="text/javascript"></script>
<script>
    var vm = new Vue({
        el: "#vue",
        //data:属性：vm
        data(){
            return{
                //请求的返回参数合适，必须和json字符串一致
                info:{
                    name: null,
                    address: {
                        street:null,
                        city:null,
                        country:null
                    },
                    url:null
                }
            }
        },
        mounted(){ //钩子函数 链式编程，ES6新特性
            axios.get('../data.json').then(response=>(this.info=response.data));
        }
    });
</script>

</body>
</html>

计算属性

计算属性的重点突出在属性两个字上(属性是名词)，首先它是个属性，其次这个属性有计算的能力(计算是动词)，这里的计算就是个函数;简单点说，它就是一个能够将计算结果缓存起来的属性（将行为转化成了静态的属性)，仅此而已;可以想象为缓存!

调用方法时，每次都需要进行计算，既然有计算过程则必定产生系统开销，那如果这个结果是不经常变化的呢?此时就可以考虑将这个结果缓存起来，采用计算属性可以很方便的做到这一点,计算属性的主要特性就是为了将不经常变化的计算结果进行缓存，以节约我们的系统开销;

<div id="app">
    <p>currrentTime1 {{currrentTime1()}}</p>
    <p>currrentTime2 {{currrentTime2}}</p>
</div>

<!--1.导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var vm = new Vue({
      el: "#app",
       methods : {
          currrentTime1: function (){
              return Date.now();  //返回一个时间戳
          }
      },
      computed: {  //计算属性 methods与computed 方法名不能重名，重名之后只会调用methods的方法
          currrentTime2: function () {
              return Date.now();  //返回一个时间戳
          }
      }
    });
</script>

插槽slot

在Vue.js中，我们使用<slot>元素作为承载分发内容的出口，作者称其为插槽，可以应用在组合组件的场景中。

<div id="app">
    <todo-title slot="todo-title" :title="title"></todo-title>
    <todo-items slot="todo-items" v-for="item in todoItems" :item="item"></todo-items>
</div>

<!--1.导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>

    Vue.component("todo",{
       template: '<div>\
                      <slot name="todo-title"></slot> \
                       <ul>\
                         <slot name="todo-items"></slot> \
                       </ul>\
                         </div>'
    });

    Vue.component("todo-title",{
       props: ['title'],
        template: '<div>{{title}}</div>'
    });

    Vue.component("todo-items",{
        props: ['item'],
        template: '<li>{{item}}</li>'
    });

    var vm = new Vue({
      el: "#app",
      data: {
          title:"图书列表",
          todoItems: ['三国','大清','大秦']
      }
    });
</script>

Vue入门小结：

核心：数据驱动，组件化

优点：借鉴了AngulaJS的模块化开发和React的虚拟Dom，虚拟Dom就是把Dom操作放到内存中执行

常用属性

v-if
v-else-if
v-else
v-for
v-on 绑定事件，简写@
v-model 数据双向绑定
v-bind 给组件绑定参数简写 :

组件化:

组合组件slot插槽
组件内部绑定事件需要使用到：this.$emit("事件名"，参数);
计算属性的特色，缓存计算数据

遵循SoC关注度分离原则,Vue是纯粹的视图框架,并不包含,比如Ajax之类的通信功能,为了解决通信问题,我们需要使用Axios 框架做异步通信;

说明：Vue开发基于NodeJS，实际开发采用vue--cli脚手架开发，vue-router路由，vuex做状态管理，Vue UI页面我们一般采用ElementUI(饿了么出品)或者ICE（阿里巴巴）,来快速搭建前端项目~

VUE-cli

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

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

需要的环境

Node.js 安装无脑下一步

确认安装成功：

node -v 正确打印版本号 v18.12.1
npm -v 正确打印版本号 8.19.2

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

这样子会下载快很多

 npm install cnpm -g    //-g全局安装
 
 # 或者使用以下语句解决  npm速度慢的问题
 npm install --registry=https://registry.npm.taobao.org

虽然安装了cnpm，但是尽量少用!

安装位置：C:\Users\cx\AppData\Roaming\npm

安装vue-cli

cnpm install vue-cli -g

使用vue list查看可以基于哪些模板创建vue应用程序，通常我们选择webpack(ES6--->ES5)

第一个vue-cli应用程序

新建一个目录
创建一个基于webpack模板的vue应用程序
```
 vue init webpack myvue
```
一路no

初始化并运行

cd myvue

npm install //下载依赖

npm run dev

ctrl + c 停止.