文章/答案/技术大牛

发布

社区首页 >专栏 >Vue

Vue

xiaozhangStu

发布于 2023-08-23 06:18:48

30600

代码可运行

文章被收录于专栏：xiaozhangStuxiaozhangStu

运行总次数：0

代码可运行

VUE

介绍

1、Vue.js目前最火的的一个前端框架，三大主流前端框架之一。 2、Vue.js是一套构建用户界面的框架（一套完整的解决方案，对项目侵入性大，中途需要跟换框架则需要重构整个项目），只关注视图层，易上手，有配套的第三方类库。 3、提高开发效率，帮助减少不必要的dom操作；双向数据绑定，通过框架提供的指令，前端只需要关注业务逻辑，不再关心dom如何渲染。

4.作者尤雨溪

MVVM

1、前端视图层的概念，主要把每个页面分成了M（Model）、V（View）、VM（VM ViewModel）。VM是其中核心，M和V间的调度者。 2、M，保存的是每个页面中单独的数据（比如要渲染页面表格，ajax请求到后台的你的数组，此数据即为M）。 3、V，每个页面的html结构。 4、VM，一个调度者，分割了M和V，M和V不直接关联，通过中间的VM。V想要保存数据到M，都要有VM做中间处理；V想要渲染页面，需要调用VM，VM从M中取数据。 5、前端中使用MVVM思想，主要让开发更方便，MVVM提供了数据的双向绑定（由VM提供）

为什么要了解vue

1.前端三大框架

angula 特色模块化

react 特色虚拟dom

vue 特色模块化+虚拟dom+自己的一些独特的功能

2.使用范围

南京前端市场占比约60%，但是以后不一定

3.面试可能会问你了解vue吗

4.考试要求

快速入门

引入cdn

<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

案例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
	<!--视图层-->
<div id="d1">
  <p>{{ message }}</p>
</div>

<script>
 var vueObj = new Vue({
  el: '#d1',
 /* model层*/
  data: {
    message: 'helloWorld'
  }
})
</script>
</body>
</html>

｛{xxx}｝有点jsp里el的感觉吧这里说一下就是根据mvc思想去构建的vue，所以学习的时候要有类比思想，所有springmvc很重要！

思路

1.导入vue

2.构建vue对象

new Vue({
  
})

3.相关常用属性

el：绑定元素

data:Vue 实例的数据对象

格式是 data: {
    count: 1
  }和
   data(): {
   return{
    count: 1
   }
   
  }
  实际开发中都是用return的，因为vue一般都是组件调用模式开发，组件是一个可复用的实例，当你引用一个组件的时候，组件里的data是一个普通的对象，所有用到这个组件的都引用的同一个data，就会造成数据污染。将data封装成函数后，在实例化组件的时候，我们只是调用了data函数生成的数据副本，避免了数据污染

components：Vue组件(后面会讲)

computed:计算属性

<div id="d1">
  <p>原始数字: {{ count }}</p>
  <p>计算后数字: {{ add }}</p>
</div>

<script>
var vm = new Vue({
  el: '#d1',
  data: {
    count: 1
  },
  computed: {
    // 计算属性的 getter
    add: function () {
      // `this` 指向 vm 实例
      return this.count+3
    }
  }
})
</script>

watch：侦听属性

filters：过滤器

methods:Vue实例方法

render：渲染函数，创建虚拟DOM

created：在实例创建完成后被立即调用，完成初始化操作

mounted()方法：el挂载到Vue实例上了，开始业务逻辑操作,系统处理消息时预先设置好的一个函数，就好像某一个周期，这个周期是系统自动执行的

beforeDestroy：实例销毁之前调用

体验绑定

控制台打vueObj._data.message="dsadasda"观察变化

相关指令（v-开头）

v-html

指令用于输出 html 代码

<div id="d1">
    <div v-html="message"></div>
</div>
    
<script>
new Vue({
  el: '#d1',
  data: {
    message: '<h1>1234</h1>'
  }
})
</script>

v-bind

HTML 属性中的值应使用 v-bind 指令

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
	<!--视图层-->
<div id="d1">
  <p v-bind:hidden="message">111</p>
</div>

<script>
 var vueObj = new Vue({
  el: '#d1',
 /* model层*/
  data: {
    message: false
  }
})
</script>
</body>
</html>

可以缩写，也就是:属性一般不写v-bind 一般只写:属性比如说

<input type="text" :value="va" >

v-if

<div id="d1">
    <p v-if="flag">在这里</p>
</div>
    
<script>
new Vue({
  el: '#d1',
  data: {
    flag: true
  },
   methods:{
       
       
       
   }
})
</script>

v-else

<div id="app">
    <div v-if="false">
      Sorry
    </div>
    <div v-else>
      Not sorry
    </div>
</div>
    
<script>
new Vue({
  el: '#app'
})
</script>

v-else-if

<div id="app">
    <div v-if="type === 'A'">
      A
    </div>
    <div v-else-if="type === 'B'">
      B
    </div>
    <div v-else-if="type === 'C'">
      C
    </div>
    <div v-else>
      Not A/B/C
    </div>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    type: 'a'
  }
})
</script>

v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。

v-on

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<body>
<div id="app">
    <p>{{ message }}</p>
    <button @click="doSomething">点我</button>
</div>


</body>
<script>
    new Vue({
        el: '#app',
        data: {
            message: '123'
        },
        methods:{
            doSomething: function () {
        alert("ddd");

    }


        }
    })

</script>
</html>

v-on 指令，它用于监听 DOM 事件

可以缩写 @xx事件例如onclick用@click

v-model

<div id="d1">
    <p>{{ message }}</p>
    <input v-model="message">
</div>
    
<script>
new Vue({
  el: '#d1',
  data: {
    message: '小黄'
  }
})
  
</script>

v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。

v-for

迭代数组

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<body>


<div id="d1">
    <dl>
        <li v-for="str in arr">
            {{ str.name }}
        </li>
    </dl>
</div>
</body>
<script>
    new Vue({
        el: '#d1',
        data: {
            arr: [
                { name: '小黄' },
                { name: '小包' },
                { name: '小王' }
            ]
        }
    })
</script>
</html>

迭代对象1

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<body>


<div id="d1">
    <ul>
        <li v-for="value in people">
            {{ value }}
        </li>
    </ul>
</div>
</body>
<script>
    new Vue({
        el: '#d1',
        data: {
            people: {
                name: '小黄',
                age: 18,
                sex: '男'
            }
        }
    })
</script>
</html>

迭代对象2

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<body>


<div id="d1">
    <ul>
        <li v-for="(value, key) in people" >
            属性{{ key }} , 值{{ value }}
    </ul>
</div>
</body>
<script>
    new Vue({
        el: '#d1',
        data: {
            people: {
                name: '小黄',
                age: 18,
                sex: '男'
            }
        }
    })
</script>
</html>

加不加key的问题

不加复选框出问题增加的时候已勾选的check框出现了错误

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<body>
<div id="d1">
    <div>
        <input type="text" v-model="name">
        <button @click="add">添加</button>
    </div>
    <ul>
        <li v-for="str in list">
            <input type="checkbox"> {{str.name}}
        </li>
    </ul>
    <script>
        // 创建 Vue 实例，得到 ViewModel
        var vm = new Vue({
            el: '#d1',
            data: {
                name: '',
                newId: 3,
                list: [
                    { id: 1, name: '小王' },
                    { id: 2, name: '小张' },
                    { id: 3, name: '小李' }
                ]
            },
            methods: {
                add() {
                    //头部追加
                    this.list.unshift({ id: ++this.newId, name: this.name })
                    this.name = ''
                }
            }
        });
    </script>
</div>

</body>

</html>

加了

<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<body>
<div id="d1">
    <div>
        <input type="text" v-model="name">
        <button @click="add">添加</button>
    </div>
    <ul>
        <li v-for="str in list" :key="str.id">
            <input type="checkbox"> {{str.name}}
        </li>
    </ul>
    <script>
        // 创建 Vue 实例，得到 ViewModel
        var vm = new Vue({
            el: '#d1',
            data: {
                name: '',
                newId: 3,
                list: [
                    { id: 1, name: '小王' },
                    { id: 2, name: '小张' },
                    { id: 3, name: '小李' }
                ]
            },
            methods: {
                add() {
                    //头部追加
                    this.list.unshift({ id: ++this.newId, name: this.name })
                    this.name = ''
                }
            }
        });
    </script>
</div>

</body>

</html>

vue中列表循环需加:key="唯一标识" 唯一标识可以是item里面id index等，因为vue组件高度复用增加Key可以标识组件的唯一性，为了更好地区别各个组件 key的作用主要是为了高效的更新虚拟DOM

template标签

template的作用是模板占位符，可帮助我们包裹元素，但在循环过程当中，template不会被渲染到页面上类似于c:foreach的感觉

<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<body>
<div id="d1">
    <div>
        <table>
            <tr>
                <th>id</th>
                <th>姓名</th>
            </tr>
            <template v-for="str in list" :key="str.id">
                <tr>
                    <td>{{str.id}}</td>
                    <td>{{str.name}}</td>
                </tr>
            </template>
        </table>
    </div>

    <script>
        // 创建 Vue 实例，得到 ViewModel
        var vm = new Vue({
            el: '#d1',
            data: {
                name: '',
                newId: 3,
                list: [
                    { id: 1, name: '小王' },
                    { id: 2, name: '小张' },
                    { id: 3, name: '小李' }
                ]
            },
            methods: {
                add() {
                    //头部追加
                    this.list.unshift({ id: ++this.newId, name: this.name })
                    this.name = ''
                }
            }
        });
    </script>
</div>

</body>

</html>

components组件

全局组件

Vue.component("",{})//也就是名字加对象

<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<body>
<div id="d1">
    <comp></comp>
    <div>
        <table>
            <tr>
                <th>id</th>
                <th>姓名</th>
            </tr>
            <template v-for="str in list" :key="str.id">
                <tr>
                    <td>{{str.id}}</td>
                    <td>{{str.name}}</td>
                </tr>
            </template>
        </table>
    </div>

    <script>
        Vue.component("comp",{template:"<h1>我是模板</h1>"});
        // 创建 Vue 实例，得到 ViewModel
        var vm = new Vue({
            el: '#d1',
            data: {
                name: '',
                newId: 3,
                list: [
                    { id: 1, name: '小王' },
                    { id: 2, name: '小张' },
                    { id: 3, name: '小李' }
                ]
            },
            methods: {
                add() {
                    //头部追加
                    this.list.unshift({ id: ++this.newId, name: this.name })
                    this.name = ''
                }
            },

        });

    </script>
</div>

</body>

</html>

局部组件

先定义对象
var xxx=｛｝；
再在你建立的vue对象里面去声明属性
 var vm = new Vue({
            el: '#d1',
            components:{
                "xxx":xxx
            }
        });

<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<body>
<div id="d1">
    <comp></comp>
    <div>
        <table>
            <tr>
                <th>id</th>
                <th>姓名</th>
            </tr>
            <template v-for="str in list" :key="str.id">
                <tr>
                    <td>{{str.id}}</td>
                    <td>{{str.name}}</td>
                </tr>
            </template>
        </table>
    </div>

    <script>
       var comp={template:"<h1>我是模板</h1>"};
        // 创建 Vue 实例，得到 ViewModel
        var vm = new Vue({
            el: '#d1',
            data: {
                name: '',
                newId: 3,
                list: [
                    { id: 1, name: '小王' },
                    { id: 2, name: '小张' },
                    { id: 3, name: '小李' }
                ]
            },
            methods: {
                add() {
                    //头部追加
                    this.list.unshift({ id: ++this.newId, name: this.name })
                    this.name = ''
                }
            },
            components:{
                "comp":comp
            }
        });

    </script>
</div>

</body>

</html>

node.js

运行在服务端的 JavaScript。类比java中jre

安装

双击运行无脑下一步

安装结束 cmd node -v 和npm -v 能用就代表成功

vue-cli

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统 node.js已经集成

使用vue-cli快速创建vue项目

准备：先在idea里装vue.js插件，重启idea，找到setting里的file and code template 将vue模板改成

<template>
    <div></div>
</template>

<script>
    import axios from "axios";

    export default {
        data() {
            return {};
        },

        components: {},

        computed: {},

        mounted() {
        },

        methods: {
            dosth:function (){axios({
                      url:"",
                      method:"",
                      params: {},
                      data: {},

                  }).then(res=> {

            })
        }
        }
    }

</script>

<style scoped>

</style>

建一个文件夹
用idea打开它
点击左下角的Terminal
输入命令 vue create 项目名(出来选项不要选default 选最后一个)
如果现实没有vue这个命令就执行npm i -g @vue/cli
如果是npm不是内部或外部命令的就把idea关了以管理员运行
按空格把router选上把Linter、formatter去掉
一直回车到save this a preSet...........(y/n)的你写个n。回车
最后他会让你cd xxx 和npm run serve 你就照着做然后弹出来地址你就成功了

8.如果你想关闭你就ctrl + c

分析项目

.git...git忽略文件

babel...es6-es5

package...类似于包的说明书

main.js

类似于程序入口

import Vue from 'vue'//引入vue
import App from './App.vue'//引入组件
import router from './router'//引入路由

Vue.config.productionTip = false//关闭生成提示

new Vue({
  router,
  render: h => h(App)  加载完整vue 并且引用app组件
}).$mount('#app')//等于new Vue({
el:"#app"
  router,
  render: h => h(App)
})

app.vue(汇总所有的组件)

<template>结构
  <div id="app">
    <router-view/>
  </div>
</template>

<style>样式
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
</style>

assets文件夹

放静态资源的

components文件夹

放组件的

public文件夹

index.html单页面应用

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>//对应main.js里的#app
    <!-- built files will be auto injected -->
  </body>
</html>

home.vue

<template>组件结构
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>组件交互
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'

export default {  默认暴露（引入简单，不然引入不到这个）
  name: 'Home',调用时候的名字
  components: {
    HelloWorld
  }
}
</script>

axios(ajax i/o system)

命令

cd 项目根目录

npm install axios --save

怎么用呢？

import axios from ‘axios’

在methods里的方法里面写

请求方式

axios(config)

axios.request(config)

axios.get(url[, config])

axios.delete(url[, config])

axios.head(url[, config])

axios.post(url[, data[, config]])

axios.put(url[, data[, config]])

axios.patch(url[, data[, config]])

模仿ajax写axios

axios({
url:,
method:,
params:{},
data:{},

}).then(funtion(res){

})
.catch(funtion(error){

})
或着
axios({
url:,
method:,
params:{},
data:{},
responseType:'',
 }).then(res=>{
                    console.log(res)

                }).catch(error=>{
                console.log(error);
        })
            }

注意点如果你是get 你就在params传值如果你是post 你就在data传值

跳转路由传值

<router-link to="Add">新增</router-link>//跳转页面
<router-link to="{name:'Add', query:{ id: id }}">新增</router-link>//跳转页面带值

this.$router.push("/xxx?xxx=xxx")//this.$router 相当于一个全局的路由器对象，.push导航到不同的 URL获取值

this.$route.query.xxx   //this.$route 表示当前路由对象，每一个路由都会有一个 route 对象，是一个局部的对象，可以获取对应的 name, path, params, query 等属性