关于Vue使用小结

VUE是什么？

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

 

Vue能作什么？

视图界面美化

 

Vue的使用步骤

1. 入门

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

npm install vue   ---》知道便可-咱们使用的是vue-cli

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

1. 使用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 的流程图中的内容按顺序执行，其中钩子方法是在执行过程的的一些方法，默认没有写内容，可是依旧会在特定的时间段执行特定的方法，咱们只须要在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的充分利用

    更多使用参考官方文档