一、入门篇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。。哎

 

 

 

Logo

前往低代码交流专区

更多推荐