Vue使用笔记教程(项目结构-基本属性-组件联系-参考链接)

1、npm run xxx执行了什么东西

例如：npm run dev ：run对应的是package.json文件中scripts字段中的dev，dev对应的就是，“webpack-dev-server --inline --progress --config build/webpack.dev.conf.js”

2、VUE项目中的结构及几个重要文件

2.1 目录结构

• main.js: 程序入口文件，初始化vue实例，并引入使用需要的插件和各种公共组件。main.js中new Vue对象中写入router，实际上是router:router，作用是main.js引入了router对象，根据路由的配置方法，需要将router对象加载到根main.js中。
• App.vue：项目的主组件，页面入口文件 ，所有页面都在App.vue下进行切换，app.vue负责构建定义及页面组件归集。
• router文件夹里的index.js：router里的index.js 把准备好路由组件注册到路由里
• index.html：vue编译后的html文件入口
• src：放置组件和入口文件
• node_modules：项目锁依赖的模块/包
• config：配置了路径端口值等
• build：配置webpack的基本配置、开发环境配置、生产环境配置等
  [参考1] VUE项目中几个重要文件
  [参考2] vue目录结构及解析

2.2 项目启动后执行过程

index.tml->main.js->app.vue->index.js->helloworld.vue
这篇能够很详细的解析文件加载过程
[参考] 浅谈vue中index.html、main.js、App.vue、index.js之前的关系以及加载过程

3、vue的基本属性

如果想看详细的内容可以参考菜鸟教程VUE .

{{ ... }}	文本插值
v-html 		指令 输出html代码
v-if 		指令 将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。
v-bind 		指令 (缩写为:) ：(绑定href标签，计算表达式)
v-on 		指令 (缩写为@) ：它用于监听 DOM 事件。页面监控常用。
v-model 	指令 (双向数据绑定)用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。
v-show 		指令 根据条件展示元素：

# v-bind 动态设置主题样式
class 与 style 是 HTML 元素的属性，用于设置元素的样式，我们可以用 v-bind 来设置样式属性。
Vue.js v-bind 在处理 class 和 style 时，专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。
v-bind:class="{ 'active': isActive, 'text-danger': hasError }"
v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"

# v-on 对键盘事件的监控
<input v-on:keyup.13="submit">
<input v-on:keyup.enter="submit">
<input @keyup.enter="submit">
常用的按键：.enter .tab .esc .space .up .down .left .right .ctrl
 .alt .shift .meta .delete(捕获 "删除" 和 "退格" 键)

# v-model 数据绑定 (placeholder是为空时的显示)
<input v-model="message" placeholder="编辑我……">		//输入框
<textarea v-model="message2" placeholder="多行文本输入……"> //复选框
select 下拉列表
//修饰符
.lazy 	转变为在change 事件中同步。不加时默认为在input事件中同步输入框的值与数据
.number 输入值转化为number类型（如果原值的转换结果为 NaN 则返回原值）
.trim 	自动过滤用户输入的首尾空格

示例如下：

<div id="app">
	<div v-html="msghtml"></div>
	<pre><a v-bind:href="url">绑定url</a></pre>
    <p>{{ message }}</p>
	<input v-model="message">
    <button v-on:click="reverseMessage">反转字符串</button>
	<p v-if="flag">标识是true才能看到哦</p>
</div>
	
<script>
new Vue({
  el: '#app',
  data: {
	msghtml : '<p>Hello html!</p>',
	url: 'http://www.baidu.com',
    message: 'Hello world!',
    flag : true
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})
</script>

执行结果：

(1) computed 和 methods 区别

可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。使用 computed 性能会更好，但是如果不希望缓存，可以使用 methods 属性。

(2) watch 侦听器

一个用于侦听功能的更通用的方法，其用来响应数据的变化，通过特定的数据变化驱动一些操作。当需要在数据变化时执行异步或开销较大的操作时，推荐使用该方法。注意immediate用法
统计接口调用次数。统计页面访问次数。统计某个按钮点击次数。

4、vue的组件(子组件与父组件)

组件（Component）是 Vue.js 最强大的功能之一。组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树。

主要是子父组件间信息的传递

父组件触发子组件中的函数 this.$refs.msgRef.msgs1()。
子组件中通过**props**接受从父组件中传递过来的数据。
父组件监听自定义事件 使用 **$on(eventName)** 监听事件(.native 修饰 v-on 监听原生事件)。
子组件自定义事件  **$emit(eventName)**子组件自定义事件 使用  触发事件。

参考流程如下：

• 要注意data定义的是一个函数

vue的路由

Vue.js 路由允许通过不同的 URL 访问不同的内容。
通过 Vue.js 可以实现多视图的单页Web应用（single page web application，SPA）。
Vue.js 路由需要载入 vue-router 库

是一个组件，该组件用于设置一个导航链接，切换不同 HTML 内容。 to 属性为目标地址， 即要显示的内容。
要注意 相关属性。

<router-link class="link-color" :to="{ path: '/dashboard/order' }">
	<h1> 点击这个部分可以导航到 /dashboard/order 目标</h1>
</router-link>

Vue.js 过渡 & 动画
transition可以设置动画效果。

<transition name = "nameoftransition">
   <div></div>
</transition>

5、vue的Ajax(重点)

[参考1 ]菜鸟教程很详细的vue ajax