Vue2.0学习--基础--0--介绍

最新推荐文章于 2022-09-23 15:08:49 发布

naildingding

最新推荐文章于 2022-09-23 15:08:49 发布

阅读量210

点赞数

分类专栏：框架—Vue 文章标签： vue.js 前端

本文链接：https://blog.csdn.net/Small_sesame/article/details/118308935

版权

框架—Vue 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

(day 1)

一、起步

Vue核心最基本的功能。

声明式渲染、条件与循环、处理用户输入、组件化应用构建。

这四个点就是起步阶段的内容，让我们一开始对Vue2.0的大致了解。

对于刚学完三板斧的新手来说，我对这些操作还是有一些疑惑。。。

不过先总结，一步一步的来感受为什么vue要这么操作的原因。

（这里只是个人的读后总结，详细的资源以及内容还需要大家自己在vue.js的官网上去阅读）

这里都是我个人的“大白话”总结。。。。

起初是Vue.js核心的基本功能：包括上面说到的四点——声明式渲染、条件与循环、处理用户输入、组件化应用构建。

首先是下载vue.js，我是下载的开发版本——下载下来就是一个.js文件，名字叫vue.js。。。

（emmmmm，难道传说中的vue就是这1w多行的代码）

现在我所知的就是，将这个vue.js放到我们的开发项目的文件夹中，并在我们的html文档里面通过<script src="vue.js" ></script>引用这个文件，，，

（这不就像是我们自己编写一个.js文件，然后在html文件里面引用它吗？只是这个vue.js不是随随便便就能写出来的。。。）

（继续往下）

我们就可以通过各种vue的方式来调用功能啊，创建各种东西啊。。

在这里我感觉vue其实是某种中间件，我们通过调用vue.js中定义好了的东西，把我们的想法传递给vue，然后vue把这些东西传递给网页，它用自己写好的一套JavaScript逻辑来实现我们想要实现的功能。

其实我们也可以跳过vue 的这个框架，自己用JavaScript通过DOM、BOM等来和网页交互，只是vue可能已经在这中间的一步完成了我们的需要考虑的浏览器兼容啊、降低内存开销啊之类的，就类似于它已经帮我们把与网页交互那层优化好了，只需要我们关注与业务逻辑就好。。。

（这只是小白的初步感受，，，）

说完这些我们先来初步感受一下vue的一些基本的使用技巧，有个大致的体验，，，

这些就是vue核心的做基本功能。。

二、声明式渲染

①、{{}}

原话：vue.js的核心是一个允许使用简洁的模板语法来声明式地将数据渲染进DOM 的系统。

vue.js的核心是一个系统。

vue.js的核心是一个允许使用语法将数据渲染进DOM 的系统。

vue.js的核心是一个允许使用简介的模板语法来声明式地将数据渲染进DOM 的系统。

HTML中

<div id="app-1">
    {{message}} {{name}} {{age}}
</div>

JavaScript中

<script type="text/javascript">
    var app1 = new Vue({
        el:"app-1",
        data:{
            message:"Hello Vue!",
            name:"dingding",
            age:18
        }
    });
</script>

我们已经在<head></head>中引用了vue.js，所以上面代码中我们就直接使用一些应该是vue中自定义的东西。

想上面这样，就是是vue渲染字符串的操作：

vue不直接和HTML进行交互。通过元素的id标签和vue实例的el属性相关联，将每个创建的vue实例挂载到HTML中的某个元素中，从而完全的掌控它。
这里的声明式渲染，在我的理解里面就是 {{}} 这个玩意，我不知道它里面到底发生了什么，因为它在HTML元素里面这么声明变量名（如message），然后在JavaScript中定义vue实例，向vue实例传递一个对象字面量，这个对象字面量包含data属性（data属性也是一个对象字面量），data属性里面包含的属性名和在{{}}中声明的变量名相同，那么我在JavaScript中设置这个属性名的值（比如：上面的"hello vue！"），HTML就会有相应的值。。。
当然我们可以在HTML中定义的<div>中设置其他的属性名，如{{name}}、{{age}}
（这里作为小白的我又不懂了，为什么这样搞，那，，这不是直接在HTML元素下面设置相应值就完事儿了吗？为啥要绕这么一大圈？
埋一个疑问（或者说是猜测）在这里，也许是因为某些情况下（兴许是很多情况下），我们需要将某些数据从JavaScript传递到HTML，而这些数据不是一成不变的，所以在这里采用了两个相同的属性名，通过vue的{{}}声明方式，将两个标志符链接起来，然后就可以通过这两个玩意儿传递数据。。。）

这个{{}}声明的过程必定是有什么骚操作的，但秉着先知道怎么用的原则，我们先记住这个是声明的意思，具体怎么达到这个效果的，以后再深究。

②、v-bind

这个呢，就是HTML元素的属性，和JavaScript中的data中的属性绑定起来：

<div id="app-2">
    <span v-bind:title="message">v-bind,你把鼠标悬停在这里试试</span>
</div>

var app2 = new Vue({
    el:"#app-2",
    data:{
        message:"页面加载于 " + new Date().toLocaleString()
    }
});

这里的意思就是v-bind可以使HTML中元素的属性，和JavaScript中的vue实例的data属性的同名属性相绑定吧，，，

这里在vue实例中，给到message的值，就是给到HTML中<span>元素的title属性值（message）

（秀归秀，我又不明白了，为啥不直接在<span>上面设置title内容，而要跑到vue中设定实例，然后给实例传递对象字面量，然后给对象字面量的data属性设置title的值。。。似乎又在绕路诶，，我觉得有原因之一应该这里调用了JavaScript中的Date类型，我们直接在HTML元素上调用JavaScript代码必定时候不好的，因为HTML最好就是只有文档标签，不要带有JavaScript代码或者CSS代码）

三、条件与循环

①、v-if

<div id="app-3">
    <p v-if="seen">  now you see me </p>
</div>

var app3 = new Vue({
    el:"#app-3",
    data:{
        seen:true
    }
});

这儿seen的值为true，所以在HTML中能够显示字符串"now you see me"，如果seen的值为false，那么这个段落就是不可见的。

②、v-for

<div id="app-4">
    <ol>
        <li v-for = "todo in todos">
            {{todo.text}}
        </li>
    </ol>
</div>

var app4 = new Vue({
    el:"#app-4",
    data:{
        todos:[
           {text:"学习JavaScript"},
           {text:"学习vue"},
           {text:"做个项目"}
        ]
    }
});

有点像是for-in循环，todo in todos，上面的例子就是在设置<li></li>，设置每一个<li></li>的内容就是todo in todos的todo.text，，，

四、处理用户输入

①、v-on

事件函数的设置...

<div id="app-5">
    <p>{{message}}</p>
    <button v-on:click="reverseMessage">点击反转消息</button>
</div>

var app5 = new Vue({
    el:"#app-5",
    
    data:{
        message:"hello vue.js!"
    },
    
    method:{
        reverseMessage:function(){
            this.message = this.message.split("").reverse().join("")
        }
    }
});

这里我就理解为v-on:后面接的是事件类型，然后将某个事件处理方法赋给这个事件类型。

接着这个事件处理函数在vue实例中的method属性定义其函数体内容。

②、v-model

表单输入与应用状态之间的双向绑定

<div id="app-6">
    <p>{{message}}</p>
    <input v-model="message"/>
</div>

var app6 = new Vue({
    el:"#app-6",
    data:{
        message:"我会跟着表单的输入变化而变化"
    }
});

表单输入的数据，通过v-model绑定HTML中声明式渲染的关键字，然后实现表单输入与应用状态之间的双向绑定。

五、组件化应用构建：Vue.component('..',{..})

组件系统是Vue的另一个重要概念，允许我们使用小型、独立和通常可复用的组件构建大型应用。

几乎任意类型的应用界面都可以抽象为一个组件树：

（上图，一整个界面分为了三个二级组件，其中一个二级组件有两个三级组件，另一个二级组件有三个三级组件）

在Vue里，一个组件的本质上是一个拥有预定义选项的vue实例。

在vue中注册组件很简单：Vue.component("..",{..})

//定义一个名为todo-item的新组件
Vue.component("todo-item",{
    template:'<li>这是个待办项</li>'
});

var app = new Vue(...);

（这里就相当于是，定义了一个vue组件，这个vue组件其实一个<li></li>）

像这样定义的template，那么所有按照这个模板创建出来的todo-item，都会是<li>这是个待办项</li>。

<ol>
    <!--创建一个todo-item组件的实例-->
    <todo-item></todo-item>
</ol>

扩展一下：

Vue.component("todo-item",{
    //todo-item组件现在接收一个“prop”，类似于自定义attribute。
    //这个prop名为todo
    props:["todo"],
    template:"<li>{{todo.text}}</li>"
});

那么我们可以通过v-bind将todo-item组件中的todo属性和相应的HTML中的属性相绑定：

<div id="app-7">
    <ol>
        <todo-item v-for="item in groceryList" 
                   v-bind:todo="item" 
                   v-bind:key="item.id"
        ></todo-item>
    </ol>
</div>

这里其实有点小绕，也就是todo属性在JavaScript中是todo-item组件的todo属性，然后在JavaScript中定义了每个模板就是创建一个<li></li>，但其中的内容时todo.text。这样就避免了上面的所有模板创建出来的内容是一样的。

在HTML中，通过v-bind将todo和item绑定起来，item呢，就是v-for循环中groceryList数组的每一项。（暂时不要管key属性）

模板有了，HTML也有了，我们就根据模板创建vue模板组件的实例吧：

//这是我们定义的模板
Vue.component("todo-item",{
    props:["todo"],
    template:"<li>{{todo.text}}</li>"
});

//这是我们创将的vue模板组件实例
var app7 = new Vue({
    el:"#app-7",
    data:{
        groceryList:[
            {id:0,text:"蔬菜"},
            {id:1,text:"奶酪"}，
            {id:2,text:"水果"}
        ]
    } 
});

那么就会循环创建三个<li></li>，并且内容是每一个todo.text

1.蔬菜

2.奶酪

3.水果

分析一下这整个过程：

<div id="app-7">
    <ol>
        <todo-item v-for="item in groceryList" 
                   v-bind:todo="item" 
                   v-bind:key="item.id"
        ></todo-item>
    </ol>
</div>

v-for就是在说，每一个item in groceryList，就创建一个<todo-item></todo-item>，

那么就根据groceryList中的item数循环创建将这个vue模板实例，循环下来就是：