您的位置:首页 > Web前端 > Vue.js

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

2018-06-02 10:25 288 查看
版权声明:本文为作者个人学习总结,未经作者同意请勿转载或作其他使用 https://blog.csdn.net/qyl_0316/article/details/80545710 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.

初始化就是赋值;
变量初始化---就是声明或者定义变量后,紧接着给变量赋值
对象(实例)初始化---就是给对象创建各种属性或是定义方法。
 
备注:本文为作者个人学习总结使用,为原创文章,未经作者同意请勿转载或作其他使用~~ 阅读更多
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐