coo1__
coo1__

Vue.js

学习框架如下：
Vue.js_第1张图片
加油！

一、 渲染页面过程和原理

Vue.js_第2张图片

1.入口文件 mian.js

通过 ./build/webpack.base.conf.js 到定义Vue.js的入口文件

module.exports = {
  entry : {
    app: './src/main.js'   // 这里就定义了Vuejs的入口文件
  }
}
2.静态页面 index.html

在根目录下找到index.html，其中

就是将来会动态变化的内容。


<html>
  <head>
    <meta charset="utf-8">
    <title>演示Vue的demotitle>
  head>
  <body>
    <div id="app">div>
  body>
html>

这个 index.html 文件就是最外层的模板。

3. main.js 中的Vue定义

回头看 src/main.js 其内容如下：

import Vue from 'vue'
import App from './App'
import router from './router'
import VueResource from 'vue-resource';
Vue.use(VueResource);

Vue.config.productionTip = false
Vue.http.options.emulateJSON = true;

new Vue({
  el: '#app',   // 这里, #app 对应着 

  router,
  template: '',
  components: { App }  // 这里, App就是 ./src/App.vue
})

其中 el:'#app' 就是 index.html 中的

而上面的， App.vue 它会被 main.js 加载，App.vue 的内容如下：

<template>
  <div id="app">
		<router-view class="view">router-view>
  div>
template>

<script>
script>

<style>
style>

在 App.uve 代码中的