vue复习（一）

Vue基础知识

单文件

基础结构

//不同的挂载方法

//第一种 也是常用的基础结构

<template>

</template>

<script>

</script>

<style >

</style>

//第二种

 <div id="app">

 </div>

 <script src="./vue.min.js"></script>

 <script>

  ew Vue({

  el: '#app'})

  </script>

//第三种

<div id="app"></div>

<script src="./vue.min.js"></script>

   <script>

      var vm = new Vue({

        el: '#app',

        template: `<div><h1>Hello World</h1></div>`,

      });

 </script>

const template = `<button>当前点击了{{count}}次</button>`;

export default {

  template,

};

//第四种

   <div id="app"></div>

    <script src="./vue.min.js"></script>

    <script>

      var vm = new Vue({ });

      vm.$mount("#app");

    </script>

无需挂载的方法直接render上写生成虚拟dom树，上面挂载的方式也是调用render生成虚拟dom树，更改数据的时候也是再次调用render更改。

在有render方法的时候其他的挂载不看，直接执行这个方法 这种方式写起来过于麻烦一般不使用

new Vue({

  render(h)=>{

  return h("div",[h("h1",`第一个vue应用{{}}`),h("p",`作者是`)]); }})

render一般在入口模块文件使用

// 入口模块文件

// 创建vue实例

import Vue from './vue.browser.js';

import App from './App.js';

new Vue({

  render: (h) => h(App), // 渲染组件App

}).$mount('#app');

Vue配置对象

computed 根据目前数据计算需要的数据

methods 与功能相关的操作方法  

data  与功能相关的数据

components 注册组件

Props 申明组件内属性

Vue指令

v-bind 绑定属性  可以简写为:

V-for 循环数值 使用的时候要加上:key=”x” x为唯一稳定的值（可以提升渲染效率）

v-on 绑定事件 可以简写为@

Vue组件

组件的出现是为了实现以下两个目标：

1、降低整体复杂度，提升代码的可读性和可维护性

2、提升局部代码的可复用性

注册组件分为两种方式（需要先导入后注册），一种是全局注册，一种是局部注册

全局注册  Vue.component('my-comp', myComp)

局部注册的方式是，在要使用组件的组件或实例中加入一个配置：

 components:{myComp}

应用组件

组件必须有结束

组件可以自结束，也可以用结束标记结束，但必须要有结束

组件的命名

无论你使用哪种方式注册组件，组件的命名需要遵循规范。

组件可以使用kebab-case 短横线命名法，也可以使用PascalCase 大驼峰命名法

<div><MyComp/> <my-comp/> </div>

var OtherComp = {

  components:{

    MyComp // ES6速写属性

  }