Vue学习记录—————— 基础功能（一）

 本想着利用这个寒假来复习一下java，顺便写点小程序来作为下个学期的课程设计，但是因为一些原因（毕竟在学校里我做过一些切图的简单工作）我希望能熟悉一些js框架，然后被学长推荐来看看Vue。虽然官方文档已经讲的十分详细了，但是在运用这个框架的时候还是遇到了一些问题，在此记录一些，作为一个备忘。

 首先是Vue的加载，官方下载开发版文件并外部链接调用js，和其他框架一样，我们的一些js代码需要在文档加载完后再执行才能产生对应效果。

window.onload=function(){
//vue代码
}；
$(document).ready(function(e) {
//vue代码
});

 然后是Vue代码了，因为没有十分深入的了解这个框架的，我只能浅显的谈一谈我学到的一些功能的应用。

一.声明式渲染

 Vue.js的核心，这是一个将js中的属性数据同步到html中的一种方法，基础语法是

 <元素标签 v-if="属性"></元素标签>

var 变量名=new Vue({
 el:'元素类id标签'，
 data：{
       属性名:值
       }
});

 二.指令

 一种以“v-”开头的html节点标签属性，指令的目的是利用js中的属性和方法对对应Vue实例下的元素节点进行更改，Vue实例（js中）绑定节点的id或者类，指令（html中）绑定Vue节点中的属性值，判定和渲染交给Vue来做。

v-if

 是否显示此html元素。

<元素标签 v-if="属性名">文本</元素标签>

var 变量名= new Vue({
   el: '元素类id标签',
   data: {
   属性名:值
  	}
  });

v-on:click

 点击元素时调用对应的函数。

<元素标签 v-on:click="函数名">文本</元素标签>

var 变量名= new Vue({
   el: '元素类id标签',
   data: {
   属性名:值
  	}，
methods:{
函数名:fuction(){
 //属性值的改变等等
    }

  }

 });

     三.组件

 将已经写好的Vue实例和对应的html代码封装成一个对应的html标签，从而形成一个组件。要使用的时候就直接在html文件中写入对应标签，加强了html代码的可读性。

Vue.component('标签名', {
  props: ['标签对应属性'],
  template: 'html代码'
})