关于vue的一些小心得基本用法详解

一.什么是vue

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

二.vue的安装部署

      第一步：安装vue：打开cmd输入：npm install vue

      第二步：安装全局vue-cli：npm install --globle vue-cli

      第三步：安装一个基于 webpack 模板的新项目：vue init webpack 创建项目的文件名

      第四步：找到刚才创建的这个项目名文件夹安装依赖：1.cd 创建项目的文件名 2.npm install

      第五步：跑起来：npm run dev

三.创建一个vue组件

       第一部分：

              页面部分用标签包裹（注意：此标签内只能存在一个根容器，然后一个跟容器内可以嵌套多个div标签）

       第二部分：

             1.js部分用标签包裹（如果这个组件需要引入另一个组件那么这样写：import 组件名 from "./组件文件名" 当然这部分是写在script标签内,且组件名首字母必须大写）

             2.引入组件后另起一行写 export default{

                                                             name:"组件文件名",

                                                             data(){

                                                                     return{

                                                                            键名：键值

                                                                      }

                                                              }

                                                             components:{

                                                                 引入的组件名（ES6写法）

                                                             }

                                                             methods:{

                                                                   用ES6的写法写事件方法 如 getinfo(event){

                                                                                  如果要用上述键值那么 这样如改变上述一个键名的值：this.上述键名=一个新的值

                                                                    }

                                                              }

                                                      }

       第三部分：

             css样式 用style标签包裹

四.vue的一些指令理解

        1.v-html 用法举例：

  web:"

哈哈哈

"

        2.v-bind 用法举例：

{{1+1==2?'正确':'错误'}}

           sanmu:"sanmus" 此时div的类名是sanmus

       3.v-if 用法举例：

  (flag:true(显示)/false(不显示) 这个状态写在data中 ，如果需要改变，可通                                                                  过this调用改变)

                                 

       4.v-else 如果上面的显示则此不显示，如果上面的不显示则此显示

       5.v-show 用法举例：

我是show渲染

                                        flag:true(显示)/false(不显示)

6.v-for 用法举例:

                               

•                                      

  {{item}}-{{index}}

                                 

                           

                          arrName:["小明","小红","小黑","小白"]  (在data中定义)

五.Vue事件操作

              vue的事件操作：v-on:click="事件名"，然后在methods:{

                                                                                              事件名（event）{

事件名括号里可以跟参数 也可以监听键盘事件 比如keyup等

                                                                                              }

                                                                                         }

六.vue的路由操作router

               vue的路由router操作：第一步 首先需要在项目文件夹下安装

                                                                cmd下 安装 npm install --save vue-router

                                                    第二步 安装完成之后开始编写代码

                                                                 1.引入import VueRouter from "vue-router"

                                                                 2.Vue.use(VueRouter)

                                                    第三步 创建一个router

                                                                 1.const router = new VueRouter({

                                                                               routes:[

                                                                                   {

                                                                                          path:"", //指路由跳转的路径（自定义一个如：/hello）

                                                                                         component:"" //指路由的组件（如创建的组件：HelloWorld,就相当于通过path的路径跳转到这个组件）

                                                                                   },

                                                                                  {

                                                                                           path:"",

                                                                                           component:""

                                                                                   }

                                                                                ]

                                                                      })

第四步：注入router 

                           new Vue({ el: '#app', router, components: { App }, template: ''" })

第五步：显示路由组件

                     

.重定向：

               {

                   path:"/",

                  redirect:"/index"

               }

七.数据双向绑定

数据双向绑定 v-model="msg" 然后在给msg一个初始值，然后{{msg}}显示出来就可以了（一般输入框使用）

给数组添加数据 可以用.push 删除pop