vue学习笔记(创建、结构)

简介

• 用于构建用户界面的渐进式框架

CDN

• content delivery network，内容分发网络。是构建在现有网络基础之上的智能虚拟网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。CDN的关键技术主要有内容存储和分发技术。
• 安装Vue，比较稳定的CDN：

  unpkg
  cdnjs

Webpack

• 前端资源加载/打包工具，它根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。
• webpack可以将多种静态资源js、css、less转混成一个静态文件，减少页面请求。

目录结构

• node_modules：npm加载的项目依赖模块

• src ：开发目录，基本上要写的都在这个目录。
  

  assets：放置图片，logo等
  page：页面
  router：路由
  style：.css
  main.js：项目核心文件（）

• package.json：项目配置文件

新建Vue项目

• 控制台命令：vue init webpack mytestvue(项目名)
  各种询问，根据需求，参考网上的文档
  等待安装完毕后，出现
  
  根据提示输入命令，项目就建好了
  
  可能会出现问题，npm ERR …，可能是npm需要更新到最新版本：
  npm install -g npm@latest
  运行时不能同时运行其他Vue项目，可能是端口冲突?

初始代码解读

1. main.js

   import Vue from 'vue'
   import App from './App'/*引入App这个组件*/
   import router from './router'/*引入路由配置*/
   
   Vue.config.productionTip = false
   
   /* eslint-disable no-new */
   new Vue({
     el: '#app',/*最后效果将会替换页面中id为app的div元素*/
     router,/*使用路由*/
     template: '<App/>',/*告知页面这个组件用这样的标签来包裹着,并且使用它*/
     components: { App }/*告知当前页面想使用App这个组件*/
   })
   
   

2. App.vue，在Vue中叫做组件。

   <template>
     <div id="app">
       <img src="./assets/logo.png">   //图片
       <router-view/>                  //路由，相当于路由容器，里面的内容由router目录下的index.js控制
     </div>
   </template>
   
   <script>
   export default {
     name: 'App'
   }
   </script>
   
   <style>
   #app {
     font-family: 'Avenir', Helvetica, Arial, sans-serif;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     text-align: center;
     color: #2c3e50;
     margin-top: 60px;
   }
   </style>
   
   

   分为三大部分，<template><script><style>，结构、脚本、样式。

   node端之所以能识别.vue文件，是因为webpack在编译时将.vue文件中的html，js，css都抽出来合成新的单独的文件。

3. router/index.js，上面提到的路由配置，给不同的path配置不同的页面（组件）

   import Vue from 'vue'
   import Router from 'vue-router'
   import HelloWorld from '@/components/HelloWorld'
   
   Vue.use(Router)       //显示声明路由
   
   export default new Router({
     routes: [
       {
         path: '/',
         name: 'HelloWorld',       //用来做识别的，不重要
         component: HelloWorld     //访问component目录下的HelloWorld页面
       }
     ]
   })
   

基础语法

1.构造器

• 每个Vue应用都需要通过实例化Vue来实现new Vue({ 构造器 })

  <div id="div_id">
  	<p>{{ site }}</p>
  </div>
  <script type="text/javascript">
  	var vm = new Vue({
  		el : '#div_id',       
  		data : {
  			site : "name",
  			url : "www.vue.com",
  			alexa : "1000"
  		}
  		methods : {
  			details: function(){
  				return "xxx";
  			}
  		}
  	})
  </script>
  

  el参数，它的内容是DOM元素的id（div的id，加#），意味着后面的改动是在指定的div里面，外部不受影响。
  data用来定义属性。
  methods定义函数。
  div中用{{ }}来输出对象属性或者函数返回值。

2.模板语法

• Vue使用了基于HTML的模板语法，允许开发者声明式地将DOM绑定至底层Vue实例的数据。

• 指令：带有v-前缀的特殊属性，用于在表达式的值改变时，将某些行为应用到DOM上。

  v-if = “seen”：根据表达式seen的值(true or false)来决定是否插入元素。
  v-model：

• v-html：用于输出html代码。

  <div id="app">
  	// 原本是 <p>{{ message }}</p> 来输出vue中的message
  	<div v-html = "message"></div>
  </div>
  
  <script type="text/javascript">
  	new Vue({
  		el : "#app",
  		data : {
  			message : '<h1>vue模板语法</h1>'
  		}
  	})
  </script>
  

• v-bind：用于改变html属性中的值

  <div id="app">
    <label for="r1">修改颜色</label><input type="checkbox" v-model="use" id="r1">
    <br><br>
    <div v-bind:class="{'class1': use}">
      v-bind:class 指令
    </div>
  </div>
  

  

  input检测为true时，div中使用class1样式。

3.自定义属性、事件、图标

• props，自定义文案，用props包裹的属性表示该属性接口暴露。然后使用该组件时就可以重新定义它的msg属性<qui-btn msg="确定" class="small"></qui-btn>。

  //组件中
  <script>
    export default {
      props: {
        msg: {
          default: '下载'
        }
      }
    }
  </script>
  

  export default 命令
  表示将这块内容导出（有时 name=" "），import之前导出才能引用

• emit：在组件的点击事件中加入this.$emit('btnClickEvent');，那么引用组件时就可以重新定义监听事件

  //引用组件
  <template>
  	...
  	<qui-btn v-on:btnClickEvent="doSth" msg="我可以点击" ></qui-btn>
  </tempalte>
  <script>
  	import quiBtn from '@components/quiButton.vue'
  	export default {
  		name : 'pageQuiButton',
  		components : {
  			'qui-btn' : quiBtn
  		},
  		methods:{
  			doSth : function(){
  				alert('点击了组建的btnClickEvent');
  			}
  		}
  	}
  

• slot：添加自定义结构，组件中添加<slot>标签，<slot name = "icon"></slot>。引用组件时

  //引用组件
  <qui-btn msg="下载" class="with-icon">
    <img slot="icon" class="ico" src="xxx.png" />
  </qui-btn>
  

  渲染的时候，会将img整个替换掉组件中的对应name的标签，其实很好理解，slot的翻译是插槽的意思，相当于把img这块内容插到一个名叫icon的插槽里面去。

总结，通过自定义组件的属性、事件等，可以更好的复用组件。

【参考文档】
包学会之浅入浅出Vue.js：升学篇
包学会之浅入浅出Vue.js：开学篇
Vue.js 模板语法