【vue教程】来自JSpang 技术胖的视频
一、入门篇qvq照例 原教程来源https://jspang.com/posts/2017/02/23/vue2-1.html 只是看了视频学习＋整理 不是原创1 computed。注意这里要 返回一个新的 。。 不然会改变原有的数据，这样就非常不好了qvq。2 sort 某种程度上其实是 按照首字母来排序的 就很蠢。。qaq那么这里要用默认的不好，我们就用自...
一、入门篇qvq
照例 原教程来源 https://jspang.com/posts/2017/02/23/vue2-1.html 只是看了视频学习＋整理 不是原创
1 computed。注意这里要 返回一个新的 。。 不然会改变原有的数据，这样就非常不好了qvq。
2 sort 某种程度上其实是 按照首字母来排序的 就很蠢。。qaq
那么这里要用默认的不好，我们就用自己写的。
function sortNumber(a,b){
return a-b
}这个写在scrpit那个外面的qwq
如果a-b是true的话，那就是a大。
再来（数据是item，返回 的是sortItems） 所以没关系。
computed:{
sortItems:function(){
return this.items.sort(sortNumber); 这个里面的本来是没的，然后写了自己用的方法穿了进去。。
}
}3 这里定义了一下，怎么来输出对象qwq。
排序是要自己写的 还没practice
【】【】【】
4 {{message}} 这种方法 还是有弊端的qwq
因为，一旦网速慢（从上往下渲染的时候 ），或者是JavaScript出错的时候，就会坏掉，不友好，直接显示{{message||
那我们可以用 <span v-text="message" ></span>
这样如果打开，是没 是没有{{ }} 这个东东的qwq 它就对用户友好一点.
5 如果dodo: '<h2>aaaa</h2>' 这种的时候就用v-html来就好了qwq..
但是，尽量少用，会引起xss攻击
6 神奇的v-on小技巧hhhh v-on： keyup.enter=“onEnter”
@keyup.enter="onEnter" v-model='fenshu2'
qwq 这里大概是 啊啊啊不行还是要自己写啊
***********但是~ 这里有一个小bug 你发现了吗？
onEnter: function(){
this.fenshu=this.fenshu+this.fenshu2
后面的改成 parseInt(this.fenshu2)
不然的话 它是一个字符串 只是粘到后面去...
onEnter:function(){
this.count=this.count+parseInt(this.secondCount);
}
你要写parseInt 懂吧 qwq
onkeyup 和v-model的意思是 绑定了model 然后输入进去的东西就是绑定的model
键盘触发 只是 按下的时候才进行键盘触发(提交model的值)而已
7 v-model指令，我理解为绑定数据源。就是把数据绑定在特定的表单元素上，可以很容易的实现双向数据绑定。
<input>表单后面直接写个v-model 非常的方便 你懂8 qwq
有这么几个修饰词
比如 v-model.lazy 这样加完之后，是懒加载，只有失去焦点的时候才会自动更新qwq
.number 只有 写的是数字才会给绑定上
.trim 是修剪左右两边的空格 qwq
试验了一下 真的有点神奇 qwq 它们都很恪尽职守的
虽然input进去的内容不能给你马上删除 但是讲真出来还不错的
8 这个 v-model的绑定，
它可以和checkbox多选绑定，可以和checkbox
radio 是单选框的绑定
<input type="radio" id="two" value="女啊啊啊 " v-model="sex">
<label for="one">女</label>
<p>{{sex}}</p>
qwq 我们可以知道: 这个value就是model绑定进去的值...qwq
你懂8 你懂8 qwq {{sex}} 里面就是那个value 给你搞过去的值qwq
9 v-bind指令 我们绑定上src 动态赋值 qwq
当然 写了冒号就可以了
当然 这样的话 就可以在Vue实例里面 下面的data里用了 你懂8
可以在data里动态改变了 你懂8 工作中有很多需要用到判断 然后就
<div :class="{classA:isOk}">2、绑定class中的判断</div><div :class="[classA,classB]">3、绑定class中的数组</div><div :class="isOk?classA:classB">4、绑定class中的三元表达式判断</div>10
v-pre指令
在模板中跳过vue的编译，直接输出原始值。就是在标签中加入v-pre就不会输出vue中的data值了。
v-cloak指令
在vue渲染完指定的整个DOM后才进行显示。它必须和CSS样式一起使用
结束
好的 第一季大概就是这样 给一个写了很多东西的源代码 吧 好懂的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="./vue.js"></script>
<title>v-on事件监听器</title>
</head>
<body>
<h1>v-on 事件监听器</h1>
<hr>
<div id="app">
本场比赛得分: {{count}}<br />
{{secondCount}}
<button v-on:click="jiafen">adds</button>
<button v-on:click="reduce">reduce</button>
<input type="text" v-model="secondCount">
<input type="text" v-model.lazy="secondCount">
<input type="text" v-model.trim="secondCount">
<hr>
<hr>
<h3>多选按钮绑定一个值</h3>
<input type="checkbox" id="isTrue" v-model="isTrue">
{{isTrue}} label for 怕是没什么用哦 (直观上来讲 qwq )
<label for='isTrue'>{{isTrue}}</label>
<hr>
<hr>
<h3>多选绑定一个数组</h3>
<p>
<input type="checkbox" id="JSPang" value="JSPang" v-model="web_Names">
<label for="JSPang">JSPang</label><br />
<input type="checkbox" id="Panda" value="Panda" v-model="web_Names">
<label for="JSPang">Panda</label><br />
<input type="checkbox" id="PanPan" value="PanPan" v-model="web_Names">
<label for="JSPang">PanPan</label>
<p>{{web_Names}}</p>
</p>
<h3>单选按钮绑定</h3>
<input type="radio" id="one" value="男" v-model="sex">
<label for="one">男</label>
<input type="radio" id="two" value="女啊啊啊 我们可以知道: 这个value就是model绑定进去的值...qwq" v-model="sex">
<label for="one">女</label>
<p>{{sex}}</p>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data() {
return {
count: 1,
message: 'hello',
isTrue: true,
web_Names: [],
sex: 'nan',
secondCount:0
}
},
methods: {
jiafen: function () {
this.count++;
},
reduce: function () {
this.count--;
},
onEnter: function () {
this.count = this.count + parseInt(this.secondCount);
}
},
})
</script>
</body>
</html>二、全局API篇
第二季第一节
1 Vue.directive('jspang',function(el,binding,vnode){
// console.log(el);
//
el.style='color:'+binding.value;
});
第一节课 vnode没用到qwq
这个el 其实上面写的是<div v-jspang="color"> {{num}} </div>
可以看到，el就是它绑定的值呀qwq 可以的可以的
这里你是log了一个binding 还有binding.name qwq
这是在干啥啊不懂懂 看起来自定义的和color一起绑定了？
所以我带着网站来了： 下面是技术胖大大的代码
https://jsrun.pro/5BpKp/edit?utm_source=website
然后，如果 <1> vue.directive 里面改了一下background
<2> <div v-jspang='background'> ... 这个挂载的也改了
<3> data里面肯定也改了
这样就可以直接改掉了qwq 外形上 是这样的
好像不能写两个的样子qwqqqqqqqqq什么鬼哦！！！！！！！！因为binding只有一个值？不慌我们带着疑问 继续往下 看(￣△￣；)
2 el: 指令所绑定的元素，可以用来直接操作DOM。
binding: 一个对象，包含指令的很多信息。
vnode: Vue编译生成的虚拟节点
3 自定义指令有五个生命周期（也叫钩子函数），分别是 bind,inserted,update,componentUpdated,unbind
1 bind:只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个绑定时执行一次的初始化动作。
2 inserted:被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于document中）。
3 update:被绑定于元素所在的模板更新时调用，而无论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新。
4 componentUpdated:被绑定元素所在模板完成一次更新周期时调用。
5 unbind:只调用一次，指令与元素解绑时调用。
上面的代码 我们可以看到 bind和insert 先已经被调用了~
上面的代码写了个add，那么add的时候update和componentUpdate里面就会调用qwq
还可以解绑，在app 作用域 的外面 用js写一个解绑 外面onclick
function unbind(){
app.$destroy();
qwq 大概理解了一下 五个声明周期就是这样的... 这样 你看 你又懂了8
//自定义指令
Vue.directive('jspang',{
bind:function(el,binding,vnode){//被绑定
el.style='color:'+binding.value;
console.log('1 - bind');
},
inserted:function(){//绑定到节点
console.log('2 - inserted');
},
还挺好的吧qwq
第二节
1 扩展实例构造器 我觉得还蛮简单的啊....
这样复制一下原话吧
我们想象一个需求，需求是这样的，要在博客页面多处显示作者的网名，并在网名上直接有链接地址。我们希望在html中只需要写<author></author>，这和自定义组件很像，但是他没有传递任何参数，只是个静态标签
var authorExtend = Vue.extend({
template:"<p><a :href='authorUrl'>{{authorName}}</a></p>",
data:function(){
return{
authorName:'JSPang',
authorUrl:'http://www.jspang.com'
}
}
});然后我们还要挂载
new authorExtend().$mount('author');万事俱备 我们已经可以开始用<autho></author>来直接引入它了qwq
【显然，我们可以知道 只有最后挂载那句话才和名字有关~~ 】
author这个~~~
2 挂载到普通标签上
巴拉巴拉。。。。。 $mount('#author');
用<author>和<div> 绑定 是一样的... 都可
这里代码是一样的qwq
那个，，，你可以看到。。。 有一个冒号 这说明什么呢
要绑定才有用 因为你不是插值了
【不绑定就获取不到里面的呀】********************** (可怜的格式失效了qwq 啊 我为什么不用markdown写 啊 好像是因为我忘了 qvq
这个更常用的场景在于 我们常常写到组件里，然后就可以实现共享。
第三节
看视频还是有点慢啊qvq
Vue.set 的作用就是在构造器外部操作构造器内部的数据、属性或者方法。比如在vue构造器内部定义了一个count为1的数据，我们在构造器外部定义了一个方法，要每次点击按钮给值加1.就需要用到Vue.set
代码给你。我稍微改了一下，感觉还真的是~~~！！！
js的限制，当你修改数组长度 or利用索引直接更改一个值的时候 vue不会为我们自己动更新
所以要用Vue。SET
下面的代码可以注释掉那句话 然后看看对比 如果刷新才能重新渲染 很gg 啊你懂吧 没连接后端就等于0了 qwq
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="./vue.min.js"></script>
<title>Vue.set 全局操作</title>
</head>
<body>
<h1>Vue.set 全局操作</h1>
<hr>
<div id="app">
<ul>
<li v-for=" aa in arr">{{aa}}</li>
</ul>
</div>
<button onclick="add()">外部添加</button>
<script type="text/javascript">
function add(){
console.log("我已经执行了");
// app.arr[outData.arr.length]='ddd';
Vue.set(app.arr,outData.arr.length,'ddd');
}
var outData={
arr:['aaa','bbb','ccc']
};
var app=new Vue({
el:'#app',
data:outData
})
</script>
</body>
</html>反正为知笔记写完从来不看。。
虽然博客也是。。聊胜于无吧 就
第四节
生命周期 钩子函数qwq。
一共有10个，这你知道的吧
create mount update active destroy
就是比如你操作数据的话 就会调用beforeupdate和update
哦。。。。。。。。。。。主要是 当你看页面的时候有个东西转转转转
那大概是create那边写的~ 加载完成了就取消了呗 （好有用鸭 单页应用比较常用 做loading。。
active是路由里用比较多
beforeCreate:function(){
console.log('1-beforeCreate 初始化之后');
},
created:function(){
console.log('2-created 创建完成');
},
第五节 template模板
这啥玩意儿耶。。。
第六节
属性中带’-‘的处理方式
我们在写属性时经常会加入’-‘来进行分词，比如：，那这时我们在props里如果写成props:[‘form-here’]是错误的，我们必须用小驼峰式写法props:[‘formHere’]。
这里有坑 尽量少用。。。。？
ommon文件夹用来放共用组件，下面写的leftNav.vue组件就放到这里。
page文件夹用来放我们的页面模板组件，页面的模板文件放到这里。
.......................
怎么越来越简单啊 我看不下去了 我好烦啊
这种教程的东西对我来说一点用都没有 前几天自己整理还看yyx的例子还自己敲了用的时候就不懂它是啥 忘得干干净净
没用的 我很烦 没用的
实战才有用
但是你接触不到的话 你根本不知道你这点过家家在真的能用的时候算什么
公司好吵啊.... 神tm什么都在公司聊 以为别人听不到的吗 烦死
我觉得我适合间歇qwq 忙一段玩一段... 吧
写博客还是很有必要的qwq// 看起来觉得很感慨*?* 反正反正...
反正写题解倒是很有必要这样的..
讨论：
什么是有幸福感的事情？
1 和cc一起
2 写网文???? 我想看的是评论啊
3 玩可持续游戏
4 画画 (?) 每天画的更好
5 stick to 并且打卡?
6 做饭?
7 想到可以回家？？？但是不能呆太久啊qaq
8 魔方 如果 我真的能 坐的特别好 那我也会 很珍惜的吧
读书的感觉吧或许我只是喜欢窝在家里巴拉巴拉。。。
什么是有幸福感的事情？嗯？？？
8 free code camp 那种的 可以打怪升级 经验累积的（codewars可能也是吧……）
我更喜欢这种qwq。。哎
前往低代码交流专区
更多推荐
1
0- 0
已为社区贡献3条内容
所有评论(0)