关于Vue使用小结

VUE是什么？

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架，基于JavaScript，轻量，无依赖

Vue能做什么？

视图界面美化

Vue的使用步骤

入门

1.安装vue --这里提前安装好了npm

npm install vue ---》知道即可-我们使用的是vue-cli

npm install -g vue-cli --->-g全局安装，以后使用方便

使用vue
1. vue基础结构

new Vue({

            el:"#myApp",

            data:{

                msg:"zs"

            },

            methods:{//方法

                clickMe(){

                    this.msg=this.msg+i++;

                }

            }，。。。。。

        })

el : 用于绑定对象，这个vue对象与只作用域绑定的对象

data : 定义字段值，

可以通过 {{ key }} 在绑定对象中使用取值，这里是单向的取值

可以通过v-model=” key ”,取值，这里取值是双向的，在过程中绑定对象中的值与Vue。Data中的值同步更新

Vue对象中的对象（data，method。。）属性可以直接key获取如：

<div id="aytest">
    <span v-text="message"></span>
    <span v-text="user.name"></span>
    <span v-html="message"></span>
    <span v-html="user.name"></span>
</div>
<!--js代码-->
<script>
    var xxx =
    new Vue({
        el:"#aytest",
        data:{
            message:"<h3>掉包了......</h3>",
            user:{
                name:"ay"
            }
        }
    })
</script>

以上的取值就是直接去的，对象user也是直接去了点属性

Vue的执行流程

关于Vue使用小结-LMLPHP

Vue 的流程图中的内容按顺序执行，其中钩子方法是在执行过程的的一些方法，默认没有写内容，但是依旧会在特定的时间段执行特定的方法，我们只需要在vue对象中《覆写》这个方法即可在对应时段执行我们的代码了。

vue支持的操作

1）简单表达式

2）三目运算

3）字符串操作

4）数组操作

5）JSON对象操作

vue的指令

v-model=“表达式” 数据双向绑定
v-text=“表达式” 设置标签中的文本
v-html=“表达式” 设置标签中的html
v-if(else else if)=“表达式” 判断条件
v-for=“表达式” 循环
v-on=“表达式” 注册事件

vue的事件

<div id="app">
  <h1>结果</h1>
    {{num}}
  <h1>表达式的写法</h1>
 <button v-on:click="num++">按钮</button><br/>
 <button @click="num++">按钮</button><br/>

 <h1>事件处理函数</h1>
 <button v-on:click="myclick">按钮</button><br/>
 <button @click="myclick">按钮</button><br/>
</div>

var app = new Vue({
	el: "#app",
	data: {
		num:0
	},
	methods:{
		myclick:function(){
			app.num++;
			console.log(this);
		}
	}
});

通过v-on：event或者@event来绑定事件，甚至可以在事件上直接操作属性支持传参

vue的计算属性：简单说就是通过定义方法返回值的方式，处理值的展示

 computed:{
          birth(){// 计算属性本质是一个方法，但是必须返回结果
              const d = new Date(this.birthday);
              return d.getFullYear() + "-" + d.getMonth() + "-" + d.getDay();
          }
      }

vue的监听

 <div id="app">
      <input type="text" v-model="message">
  </div>
  <script src="./node_modules/vue/dist/vue.js"></script>
  <script type="text/javascript">
      var vm = new Vue({
          el:"#app",
          data:{
              message:""
          },
          watch:{
              message(newVal, oldVal){
                  console.log(newVal, oldVal);
              }
          }
      })
  </script>

通过方法建通属性的变化，注意在使用这个能力的时候注意this的内容是被包装过的，调用方法也需要找从this里找，this对象可以传递修改

vue的组件功能

可以定义全局组件和局部组件两种，

局部组件：

var app = new Vue({
    el: "#app",
    data: {},
    components : {
        "局部组件的名字1" : {组件的配置对象}
        "局部组件的名字2" : {组件的配置对象}
    }
  });

全局组件：

Vue.component("mycomponent1",{
	template : "<h1>这是第一个全局组件</h1>"
})

难度不大，只是作用域有区别而已，注意：组件中的数据必须是函数

"组件的名字":{
	template: "",
	data : function(){
		return {
		  键1:值1,
		  键2:值2
		}
	}
}

vue的路由

关键点：

1.<router-view></router-view>是路由生效的位置

2.引入路由后，还必须Vue.use(VueRouter)才能使用

import Vue from 'vue';
import VueRouter from 'vue-router'
es语法需要换成js导入
Vue.use(VueRouter)

3.默认会去找vue对象中的router

<div id="app">
	<!-- 使用 router-link 组件来导航. -->
	<!-- 通过传入 `to` 属性指定链接. -->
	<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
	<!-- 使用app中的路由：匹配到product路由地址，然后在router-view标签中展示这个地址对应的资源 -->
	<router-link to="/product">公司产品</router-link>
	<router-link to="/about">关于我们</router-link>
	<hr />
	<!-- 路由出口 -->
	<!-- 路由匹配到的组件将渲染在这里 -->
	<router-view></router-view>
</div>

import Vue from 'vue';
import VueRouter from 'vue-router'
es语法需要换成js导入
Vue.use(VueRouter)

//>>1.定义首页:组件
var index = Vue.component("index", {
    template : "<h1>首页</h1>"
});
//>>2.公司产品：组件
var product = Vue.component("product", {
    template : "<h1>公司产品</h1>"
});
//>>3.关于我们：组件
var about = Vue.component("about", {
    template : "<h1>关于我们</h1>"
});

//>>4.创建一个路由：
var router = new VueRouter({
    routes : [ {
        path : "/",//路由地址
        component : index
        //路由对应的资源
    }, {
        path : "/about",//路由地址
        component : about
        //路由对应的资源
    }, {
        path : "/product",
        component : product
    }, ]
});

//创建一个vue对象
var app = new Vue({
    el : "#app",//挂载在app上
    router : router
//使用路由对象
});

总结：

在vue中使用的扩展和功能基本通过vue对象中的对象体现，充分利用这些对象的就是对vue的充分利用

更多使用参考官方文档

AnlexAn

关于Vue使用小结