【Vue】1、HelloVue！！

最新推荐文章于 2022-05-29 09:20:51 发布

Zangjiji

最新推荐文章于 2022-05-29 09:20:51 发布

阅读量385

点赞数

分类专栏： Vue 文章标签： vue java

本文链接：https://blog.csdn.net/Zangjiji/article/details/109083672

版权

Vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

【Vue】1、HelloVue！！

一、简介

1、vue简介

Vue.js（读音 /vjuː/, 类似于 view）是一套构建用户界面的渐进式框架。
Vue 只关注视图层，采用自底向上增量开发的设计。
Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

它具有以下的特点：

易用（有点前端基础就可！）
灵活（简单小巧！）
性能优！

Vue.js 的 API 是参考了AngularJS、KnockoutJS、Ractive.js、Rivets.js。

还有要提一嘴！vue的作者是中国人尤雨溪哟！

帅！

2、MVVM模式

提到view就不得不提一下MVVM模式。

前端视图层的概念，主要把每个页面分成了M（Model）、V（View）、VM（VM ViewModel）。VM是其中核心，M和V间的调度者。
M，保存的是每个页面中单独的数据（比如要渲染页面表格，ajax请求到后台的你个数组，此数据即为M）。
V，每个页面的html结构。
VM，一个调度者，分割了M和V，M和V不直接关联，通过中间的VM。V想要保存数据到M，都要有VM做中间处理；V想要渲染页面，需要调用VM，VM从M中取数据。
前端中使用MVVM思想，主要让开发更方便，MVVM提供了数据的双向绑定（由VM提供）。

二、第一个Vue程序

1、准备工作

我们写的时候还是使用idea写就行了，当然使用专业的前端工具比如说HBuilder啥的也可。

idea的话首先要下载下插件。

再setting中的plugin选项中找到vue.js 点击install 就可了！

然后我们创建一个html页面，去导一下vue的cdn.

<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>

然后开始写把！

2、第一个Vue程序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>



<!--拿message，有点像el表达式-->
<p id="dirty">{{message}}</p>

<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>


<script>
    var dirty = new Vue({
        // 拿到id为dirty的对象
        el : '#dirty',
            data:{
                 // 信息
                message : "helloVue!"
            }
        }
    )
</script>
</body>
</html>

这时候我们去浏览器看看！

显示没有问题！
这时候我们可以在控制台动态改变下message值

我们发现刚改完之后，浏览器不需要刷新，值直接动态改变了？

这就不得不说他的动态绑定机制了，前端展示的数据与ViewModel中的数据是绑定的，当ViewModel中的值改变之后，View中的值自动改变！数据直接与Dom元素建立了关联，不用手动的去改变Dom来重新渲染值！

三、Vue基本语法

说来说去，前端的东西主要就是绑定，循环以及判断。

1、绑定

之前我们已经见过一个了！就是通过双大括号进行绑定{{}}，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>



<!--拿message，有点像el表达式-->
<p id="dirty">{{message}}</p>

<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>


<script>
    var dirty = new Vue({
        // 拿到id为dirty的对象
        el : '#dirty',
            data:{
                 // 信息
                message : "helloVue!"
            }
        }
    )
</script>
</body>
</html>

其实我们还可以通过v-bind进行数据的绑定

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>



<p id="dirty" >
    <span v-bind:title="message">鼠标悬停查看信息</span>
</p>

<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>


<script>
    var dirty = new Vue({
        // 拿到id为dirty的对象
        el : '#dirty',
            data:{
                 // 信息
                message : "helloVue!"
            }
        }
    )
</script>
</body>
</html>

这里也很好理解，vue中也封装了一些指令供开发人员使用，他们一般都以v-开头，这里v-bind是一个绑定的指令。

我们动态改变信息发现view中的信息跟着一起改变了！！！

有点意思！！

2、判断

一般我们使用

v-if
v-else
v-else-if

进行判定！

看个demo

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-if="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>



<!--拿message，有点像el表达式-->
<div id="dirty">
    <p v-if="check==='A'">是A</p>
    <p v-else-if="check==='B'">是B</p>
    <p v-else>谁也不是！</p>
</div>


<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>


<script>
    var dirty = new Vue({
        // 拿到id为dirty的对象
        el : '#dirty',
            data:{
                 // 信息
                check : "A"
            }
        }
    )
</script>
</body>
</html>

最开始我们发现他是显示是A的

之后我们动态改变一下他的元素。

同理改成别的他就显示别的了！

3、循环

循环我们这里主要的语句时使用v-for语句

具体格式为：

v-for="xxx in xxxx"

有点像java中的for(xxxx: xxxx)的循环

用个demo看看

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-if="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>



<!--拿message，有点像el表达式-->
<div id="dirty">
    <!--遍历jj-->

    <li v-for="char in jj">
        {{char.message}}
    </li>
</div>


<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>


<script>
    var dirty = new Vue({
        // 拿到id为dirty的对象
        el : '#dirty',
            data:{
                //定义数组jj
                jj: [
                    {message: "jj有点东西"},
                    {message: "jj帅的！"},
                    {message: "jj就是dirtyLily"}
                ]
            }
        }
    )
</script>
</body>
</html>

最后输出结果！

四、事件绑定

在vue中事件一般使用v-on: 进行绑定

当比如说v-on：click即使点击事件。

在vue中，之前我们讲到了el和data这两大属性，当我们需要定义方法时，可以使用methods: 方法这种方式定义，比如说：

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-if="http://www.w3.org/1999/xhtml"
      xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>



<!--拿message，有点像el表达式-->
<div id="dirty">
    //当点击时执行sayHello
    <button v-on:click="sayHello">点我</button>
</div>


<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>


<script>
    var dirty = new Vue({
        // 拿到id为dirty的对象
        el : '#dirty',
            data:{
            },
            methods:
                {
                    //定义了一个sayHello方法
                    sayHello:function () {
                        alert("你好啊！");
                    }
                }

        }
    )
</script>
</body>
</html>

没问题！

五、双向绑定

Vue 提供了 v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定。

实现一个动态在框后面追加input框的demo

demo：

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-if="http://www.w3.org/1999/xhtml"
      xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>



<!--拿message，有点像el表达式-->
<div id="dirty">
<!--    和jj进行绑定-->
    <input type="text" v-model="jj" >     {{jj}}
</div>


<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>


<script>
    var dirty = new Vue({
        // 拿到id为dirty的对象
        el : '#dirty',
            data:{
                jj : ""
            },


        }
    )
</script>
</body>
</html>

最后输出是这样的！

单选框也是一样的！

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-if="http://www.w3.org/1999/xhtml"
      xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>



<!--拿message，有点像el表达式-->
<div id="dirty">
<!--    和jj进行绑定-->
    <input type="radio" name="sex" value="男" v-model="jj">男
    <input type="radio" name="sex" value="女" v-model="jj">女

    <p>选了{{jj}}</p>
</div>


<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>


<script>
    var dirty = new Vue({
        // 拿到id为dirty的对象
        el : '#dirty',
            data:{
                jj : ""
            },


        }
    )
</script>
</body>
</html>

完全可！

Zangjiji

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【Vue】1、HelloVue！！

【Vue】1、HelloVue！！一、简介1、vue简介Vue.js（读音 /vjuː/, 类似于 view）是一套构建用户界面的渐进式框架。Vue 只关注视图层，采用自底向上增量开发的设计。Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它具有以下的特点：易用（有点前端基础就可！）灵活（简单小巧！）性能优！Vue.js 的 API 是参考了AngularJS、KnockoutJS、Ractive.js、Rivets.js。还有要提一嘴！vue
复制链接

扫一扫

专栏目录