vue.js最最最最简单实例

Z时代
2024-01-10
分类：综合

vue

vue.js" title="vue.js">vue.js最最最最简单实例

一、总结

一句话总结：

1、vue.js实现实现数据的双向绑定用的是什么标记？

双大括号：比如{{message}}

2、vue数据循环输出的标记是什么？

用的是标签的v-if自定义属性

10           <span v-if="ok">  
11                {{message}}  
12            </span>

循环读取数据感觉和thinkphp有点像

15                <li v-for="l in list">  
16                    my name is {{l.name}},I am {{l.age}} years old  
17                </li>

3、vue.js的使用步骤是怎样的？

a、引包

b、{{变量名}} 实现双向数据绑定

c、new Vue对象来操作数据

二、最最最最简单的Vue示例（使用vue.js实现数据绑定实例）

1、基本介绍。

Vue作为中国人自己开发和维护的前端框架，兼备了angular和react的一些优点。先从一个最简单的Vue示例开始：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Vue学习</title>
        <script src="https://unpkg.com/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <p>{{ message }}</p>
        </div>
        <script>
            new Vue({
                el: \'#app\',
                data: {
                    message: \'Hello Vue.js!\'
                }
            })
        </script>
    </body></html>

2、使用

a、引包

首先，作为一个js框架，我们需要引入它的库vue.js.就像我们学习jquery，我们就要使用script标签引入jquery.js。

这个src可以是自己下载的vue包，也可以是线上维护更新的cdn，这两者的唯一区别就是：我们使用自己下载的包，稳定且安全。使用cdn托管的方式，有可能代码托管的服务器出问题，会影响自己的项目。

b、{{变量名}} 实现双向数据绑定

其次，我们看到界面的这个东西：{{message}}。

这是一种数据双向绑定的语法，熟悉angular或者react的都知道，这里面的是一个变量，这个变量的值我们在js代码中赋值改变，界面就会跟着改变。如果message我们赋值为hello，界面就会展示hello。

c、new Vue对象来操作数据

最后，我们看这段代码：

new Vue({
    el: \'#app\',
    data: {
        message: \'Hello Vue.js!\'
    }})

其中：new Vue代表了我们对我们的界面操作的申明。

el：“#app”,代表我要在id为app的div盒子中操作数据，表达的是一种入口和范围的概念，就像我是一个中国人，我的活动范围就是中国，我的所有的所作所为目前就在中国这个范围内。

data：{

message：“hello vue,js!”

}

这是数据的双向绑定的写法，我们改变message的值，界面中的值会跟着改变。

这就是一个基本的最简单的vue代码的实现。

<完>

参考：Vue初体验（一），最简单的Vue示例 - CSDN博客
https://blog.csdn.net/mapbar_front/article/details/71941517

三、使用Vue实现数据绑定与判断循环最最最简单实例

Vue作为2016年最火的框架之一，以其轻量、易学等特点深受大家的喜爱。今天简单介绍一下Vue的使用。

首先，需要在官网下载vuejs，或者直接用cdn库。以下实例使用Vue实现数据绑定与判断循环：

 1 <!DOCTYPE html>  
 2 .<html>  
 3    <head>  
 4        <meta charset="UTF-8">  
 5         <title></title>  
 6    </head>  
 7     <body>  
 8         <div id="app1">  
 9            <!--vue判断-->  
10           <span v-if="ok">  
11                {{message}}  
12            </span>  
13             <!--vue循环-->  
14             <ul>  
15                <li v-for="l in list">  
16                    my name is {{l.name}},I am {{l.age}} years old  
17                </li>  
18            </ul>  
19        </div>  
20         <!--引入cdn库，引入js需要在最底部-->  
21        <script src="//cdn.bootcss.com/vue/2.1.8/vue.min.js"></script>  
22         <script src="js/v1.js" type="text/javascript" charset="utf-8"></script>  
23     </body>  
24 </html>

js代码:

//声明  
02.var app1=new Vue({  
03.    //绑定 DOM 元素  
04.    el:\'#app1\',  
05.    data:{  
06.        message:"hello world",  
07.        list:[  
08.            {name:\'lvxueyuan\',age:15},  
09.            {name:\'xueyuan\',age:15},  
10.            {name:\'yuan\',age:15},  
11.            {name:\'lv\',age:15},  
12.            {name:\'lvxue\',age:15}  
13.        ],  
14.        ok:1  
15.    }  
16.})