Vue开发中问题，心得学习总结~~

vue开发中问题和心得


vuejs:
https://cn.vuejs.org
https://vuejs.org/v2/guide/installation.html
notepad++ 中保存为 ctrl + s 另存为ctrl + alt + s
Chrome控制台清除内容快键键ctrl + L 和 Linux清屏一样
Chrome控制台Enter是执行，换行是shift + enter


问题：
1.怎么将notepad++ 设置为默认的打开方式？
2.怎么设置百度为某个浏览器打开的默认主地址？
3.GoogleChrome console不见了？
4.浏览器标题栏是乱码，tab页签是乱码？
5.如何替换word中的空行？Ctrl + H 查找中输入^p^p 替换为^p 这样会将两行空行替换为一行。


Chrome浏览器打开HTML结尾的网页有时候显示乱码，原因是我们有时候用微软记事本等工具编辑HTML页面，选择保存的时候用ANSI编码格式导致显示出错。
<meta chartset=UTF-8 > 只是告诉浏览器要用UTF-8来解释HTML文档，而文档的编码，是在你保存时的选择决定的。如果保存ANSI 然后用UTF-8解释，肯定是乱码。记事本的话，默认保存的文件格式是ANSI。所以在保存的时候要修改为UTF-8。


什么是异步编程?
传统的同步编程是一种请求响应模型，调用一个方法，等待其响应返回.

异步编程就是要重新考虑是否需要响应的问题，也就是缩小需要响应的地方。因为越快获得响应，就是越同步化，顺序化，事务化，性能差化。

异步编程通常是通过fire and forget方式实现，发射事件后即忘记，做别的事情了，无需立即等待刚才发射的响应结果了。(发射事件的地方称为生产者，而将在另外一个地方响应事件的处理者称为消费者).异步编程是一种事件驱动编程，需要完全改变思路，将“请求响应”的思路转变到“事件驱动”思路上，是一种软件编程思维的转变.下面几种你看参考一下

1、异步编程模型 (APM) 模式（也称为 IAsyncResult 模式），其中异步操作要求 Begin 和 End 方法（例如，异步写操作的 BeginWrite 和 EndWrite）。对于新的开发工作不再建议采用此模式


2、基于事件的异步模式 (EAP) 需要一个具有 Async 后缀的方法，还需要一个或多个事件、事件处理程序、委托类型和 EventArg 派生的类型。EAP 是在 .NET Framework 2.0 版中引入的。对于新的开发工作不再建议采用此模式。
3、基于任务的异步模式 (TAP)，该模式使用一个方法表示异步操作的启动和完成。.NET Framework 4 中引入了 TAP，并且是 .NET Framework 中异步编程的建议方法


什么是JavaScript异步编程??
你向服务器提交一个请求，服务器处理你的请求，再将处理的结果返回给你，这个过程需要一段时间。要是同步的话，这个段时间你什么都不能干，就等待服务器的返回结果。但是在异步编程，你可以不必等待服务器的返回结果，直接向下继续走。当服务器的结果返回了，再对返回结果进行处理。 异步编程，会有比较好的用户体验，用户基本就不用再等待，操作很连续。但是也会有一些问题，例如：你发送请求完了，继续往下走，但是下面的用到了服务器的返回结果，而此时结果还没有返回，就会出现一些问题。这在小项目还是很好解决的，但是要是多个系统进行集成的话，就需要解决好这些异步请求的同步问题。

同步（Synchronous）
异步（Asynchronous）

v-html和v-text的却别是什么？
{{}}是v-text的简写形式 也可以：
<div v-text="message"></div> 只不过这种是以DOM属性的方式添加的，而
<div>{{ message }}</div> 则是以插值的方式
也可以用document.getElementById("app").innerHTML; 这种原生的js方式获取标签中间的文本。
text只是输入纯文本
v-html会连同html标签一同输出

1.全局注册组件
先用Vue.component("组件名"，{ 组件描述 template的内容即组件的内容 })
全局注册组件(可以在任意根实例下使用

2.局部注册组件 在vue实例内容使用components来注册，只能在该实例内部使用
var vm = new Vue({
el: '#app',
components: {
}
});

课后作业
https://www.jianshu.com/p/9ad1ba89a04b 一文搞懂vue组件
http://www.w3school.com.cn/tags/att_input_type.asp

Vuejs的计算属性computed实际上是将{{ varible }} 差值表达式中的变量以一个函数的形式来写，因为函数比较灵活且容易维护管理可以处理复杂的业务逻辑
如：<div id="app">
{{ varible }}
</div>

var vm = new Vue({
el: "#app",
data: function() {
return { //其实data中return 的都是一个变量
}
},
computed: {
variable: function() {
//处理你自己的关于variable的逻辑，然后返回函数的结果
}
}
});


<div id="app">
<p v-for="n in 10">{{ n }}</p> <!--因为p是块级元素会换行所以遍历的每一项也会自动换行-->
<div v-for="value in 10">{{ value }}</div>
<span v-for="v in 10">{{ v + "-"}}</span> <!--不会换行因为span是行内元素只会出现在一行-->
<div v-show="isTrue === 1">{{ isTrue }}</div>
</div>

Vue.directive("focus",{
inserted: function(el) {
el.focus();//先获取焦点
el.select();//选中状态
}

});

事件修饰符--用来控制事件的触发时机
在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。
为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。
.stop
.prevent
.capture
.self
.once
<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>


<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>


<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>


<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>


<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>


<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>
使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用@click.prevent.self 会阻止所有的点击，而 @click.self.prevent 只会阻止对元素自身的点击。
<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>
不像其它只能对原生的 DOM 事件起作用的修饰符，.once 修饰符还能被用到自定义的组件事件上。如果你还没有阅读关于组件的文档，现在大可不必担心。


V-model也有修饰符，用于控制数据同步的时机
v-model.lazy .lazy修饰符
v-model.number .number修饰符会将输入的String字符串类型,转变为Number类型
@input 会用到 event.target.value 就是触发这个事件的DOM对象的值
v-model.trim   .trim会自动过滤输入的首尾空格


v-on 指令 v-on:click="handleClick" ==> v-on:click.native="handleClick"
@click.native  .native修饰符表示监听的是一个原生事件监听的是该组件的根元素
slot 内容分发
slot="title"
slot="footer"
https://www.zhihu.com/question/37548226?sort=created 知乎上关于slot的理解的例子


问题：在javascript中对象和数组是引用类型是什么意思？？？
什么是引用类型？？
父子组件通信？或者非父子组件通信
要通信肯定得有打($emit)电话的人和接($on)电话的人,还得有一个共同的东西或者桥梁电话号码来传递信息。
props:["width"] props的值都是字符串数组，
也可以是对象
问题：在Vue中什么是响应式的？什么事非响应式的？

this.$refs
Vue提供了子组件索引的方法用特殊的属性ref 来为子组件指定一个索引名称，并在父组件内通过this.$refs来访问指定名称的子组件。

在子组件中可以通过this.$parent来直接访问该组件的父组件或父实例
父组件可以通过this.$children来访问所有的子组件

非父子组件之间的通信
bus 中央事件总线
var bus = new Vue();new 一个空的vue实例来充当中介
bus.$emit("","")
bus.$on("",function(){//回调函数});
SPA单页面富引用
javascript中的观察者(Observer)模式：dispatchEvent (主动 打电话)和 addEventListener (被动 等电话接电话)

在父子组件通信中：$emit() 主动-打电话 子组件 $on() 被动-等电话 父组件

v-on 指令除了监听DOM事件外，还可以用于组件之间的自定义事件。
比如：v-on:increase="handleIncrease" ==> @increase="handleIncrease" （后一种是语法糖形式）

$nextTick()方法涉及到vue的一个重要概念异步更新队列
$nextTick就是知道什么时候DOM更新完成的。相当于回调函数，就是请求结束后紧接着要执行的动作，就是DOM加载OK了然后执行相应的操作。

v-html和v-text的区别
总结：v-html会解析含有html标签的文本，只输出文本，而v-text会将html标签当做纯文本一并输出
methods:{
getValue() {
this.$nextTick(function(){
var text = document.getElementById('id').innerHTML;
console.log(text);
});
}

}

及时总结：
notepad ++ 的主要设置在设置标签中包括--首选项--语言格式设置-快捷键设置 以及运行中可以定制运行的浏览器
而且可以在行号出右键单击快速选中一行或者按住Shift键快速选中多行
视图中-显示符号-显示缩进参考线

总结：Word中快速删除一行空白行：直接按Delete既可。
Word中在已打开的文档页面中快速新建一个新的空白文档的快捷键是Ctrl + n（既可在处于当前编辑页面而不退出的情况下新建）
工具-文件夹选项-显示或隐藏的文件或文件夹

2018年1月22日20:59:47
@keyup.enter.native = 
@keyup.esc.native = 

message: '页面加载于 ' + new Date().toLocaleString()

你只需要明白所有的 Vue 组件都是 Vue 实例，并且接受相同的选项对象 (一些根实例特有的选项除外)。
 
2018年1月26日21:45:57
1.模板字面量—让javascript支持多行字符串，并且会按照代码中的换行，原封不动的输出到结果中。
反撇号``
let message = `Multiple
Stirng`
和
let message = `Multiple\nstring` //用\n显示的来指明插入新行的位置
是等价的，效果是一样的。

2.字符串占位符：${ variable }
let name = “David”,
Message = “hello,${ name }” //输出hello,David

3.循环中的块作用域绑定
1）循环中的函数
先看一个例子：
var funcs = [];
for(var i=0;i<10;i++){
console.log(i);
}
funcs.forEach(function(func){
func(); //输出了10次数字10
});
解决问题：使用立即调用函数表达式（IIFE）
var funcs = [];
for(var i=0;i<10;i++){
funcs.push(function(value){
return function(){
console.log(value);
}
}(i)));

}

funcs.forEach(function(func){
func();//输出0，然后是1,2，直到9

});

循环中的let声明
var funcs = [];
for(let i=0;i<10;i++){
funcs.push(function(){
console.log(i);
});
}
funcs.forEach(function(){
func();  //输出0，然后是1,2，直到9
});

2018年2月5日21:33:08

vuex到底是什么东西，他是干嘛用的？
https://segmentfault.com/q/1010000008455668 
http://blog.csdn.net/js_admin/article/details/74330591 

ADD 2018年2月27日21:52:14

<div v-for=(index, key, role) in getCmeList()  :key=”item.index”  :role=”item.role”></div>
这样就是给div 这个 DOM对象既增加了方法有添加了属性，这样就可以在methods中
用this.role，this.getCmeList(), this.key  来获取这个对象的属性了，很方便。

总结要有一种Vue的思想，既数据绑定，可以给DOM任意添加需要的属性或者方法来绑定数据到属性和方法中，通过改变属性值或调用方法来传递数据改变view.

初始化就是赋值；
变量初始化---就是声明或者定义变量后，紧接着给变量赋值
对象(实例)初始化---就是给对象创建各种属性或是定义方法。
 
备注:本文为作者个人学习总结使用，为原创文章，未经作者同意请勿转载或作其他使用~~