Vue简约及基本用法

发布时间：2024-11-18 06:44:40 来源：网络

.

初识Vue 一什么是Vuevue属于前端知识，在学习vue之前，需要简单了解HTML、css、JavaScript的知识。Vue是框架。 Vue是一套构建用

初识Vue

一.什么是Vue

vue属于前端知识，在学习vue之前，需要简单了解HTML、css、JavaScript的知识。Vue是框架。
Vue是一套构建用户界面的渐进式架构。vue只关注视图层，采用自底向上增量开发的设计。
Vue是为了通过简单的API实现响应的数据绑定 和 组合的视图组件。

二.IDEA中使用Vue

打开idea，找到file选项卡中的setting项，点击进入；
在搜索栏找到Plugins，点击之后再搜索vue；
找到Vue.js，点击下载即可。

三.第一个简单vue实例

新建java项目，建立HTML文件，分别编写script标签和div标签。

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
    <script src="../lib/vue.js" type="text/javascript"></script>
</head>
<body>
<div id="firstOne"><!--用div标签的id属性来关联vue对象-->
    <p>{{msg}}</p>
    <p>{{msg1}}</p><!--用花括号套花括号的方法，来取值-->
    <button v-on:click="hello()">点击下显示你好</button><!--v-on刚写会报红，Alt+enter在HTML标签中导入：lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"即可-->
</div>
<script>
    var vue = new Vue({
        el:"#firstOne",<!--el表示元素-->
        data:{<!--data表示数据-->
            msg:"hello,vue!",
            msg1:"everything is okey!"
        },
        methods:{<!--methods表示方法-->
            hello:function(){
                alert("你好！");
            }
        }
    });
</script>
</body>
</html>

四.Vue基本用法

1. text+html+cloak+插值表达式

v-text：
1. 语法：
2. 作用：用于给HTML元素添加文本。
3. 注意：
  1. 在使用v-test的情况下，不会出现像v-cloak一样的白屏现象和由于网速较慢时使用直插表达式出现的闪烁现象。
  2. v-text会将Model中的数据完全替换到HTML元素中（覆盖），而插值表达式只会将Model中的数据替换到插值表达式中（占位符内容的替换）。
  3. 插值表达式和v-text都可以给HTML元素显示文本；插值表达式和v-text都不会解析要添加文本中的HTML标签（原样显示）。
v-html：

和v-test大致相似，唯一区别：给HTML添加内容时会解析内容中的HTML。
v-bind：
1. 语法：在HTML元素的属性目前加上绑定标识，此时HTML的该属性的值就会根据属性值的名字从Model中获取数据。如：v-bind:value="msg"。
2. 注意：
  1. v-bind用于绑定HTML元素属性的值；
  2. v-bind可以简写成:，比如上面的v-bind:value="msg"也可以写成:value="msg"。
  3. vue会将被v-bind标记的属性当做JavaScript表达式，只要表达式合法，就能执行（数据必须时字面量或来自于Model中）。
v-on：
1. 语法：在HTML的事件属性（不带on）前加上绑定标识，此时HTML触发此事件时，会执行事件中绑定的代码；
2. 注意：
  1. 常见的web网页的事件都支持绑定
  2. 事件名字不带on
  3. 事件触发的方法必须在methods中定义
  4. v-on标识的属性会被Vue解析为特定JavaScript，只要内容符合JavaScript规范，都能正确执行（比如传入参数）v-on:等价于@

1.1 代码实现走马灯

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>走马灯</title>
</head>
<body>
<h1>使用Vue实现跑马灯效果</h1>
<div id="appp">
    <button @click="begin()">动</button>
    <button @click="over()">停</button>
    <h3 v-html="test"></h3>
</div>

<script src="../lib/vue.js" type="text/javascript"></script>
<script type="text/javascript">
    var vue = new Vue({
        el:"#appp",
        data:{
          test:"滚动显示，滚动显示123456789",
            lightIntervalID:null
        },
        methods:{
            begin(){
                if (this.lightIntervalID!==null){return;}
                var this1=this;
                this.lightIntervalID=setInterval(function () {
                    this1.test=this1.test.substring(1).concat(this1.test.charAt(0))
                },300);
            },
            over(){
                clearInterval(this.lightIntervalID);
                this.lightIntervalID = null;
            }
        }
。
    });
</script>
</body>
</html>

2. 实现双向数据绑定的指令

v-mode：唯一的一个实现双向数据绑定的指令
1. 语法：
```
<input type="text" v-model="num1" />
data:{
    num1:'0',
    num2:'0'
}
```
2. 适用元素：表单元素，其它元素不能使用v-model指令；
3. 双向绑定：
  1. model层数据的改变会影响view层HTML结果
  2. HTML中表单元素值的改变会写入对应的model层的数据中

2.1代码实现计算器

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>双向数据绑定实现计算器</title>
    <script src="../lib/vue.js" type="text/javascript"></script>
</head>
<body>
<div id="calc">
<h1>计算器</h1>
    <!--第一个数-->
    <input type="text" v-model="num1" />
    <!--加减乘除选择标签-->
    <select v-model="opr">
        <option value="+">+</option>
        <option value="-">-</option>
        <option value="*">x</option>
        <option value="/">/</option>
    </select>
    <!--第二个数-->
    <input type="text" v-model="num2" />
    <!--等于号按钮，绑定计算事件-->
    <button @click="calc()">=</button>
    <!--显示结果-->
    <span style="font-size: 20px;color:mediumaquamarine" v-text="result"></span>
</div>

<script>
    var vue = new Vue({
        el:"#calc",
        data:{
            num1:0,
            num2:0,
            opr:'+',
            result:0
        },
        methods: {
            calc() {
                switch (this.opr) {
                    case "+":
                        this.result = parseInt(this.num1) + parseInt(this.num2);
                        break;
                    case "-":
                        this.result = parseInt(this.num1) - parseInt(this.num2);
                        break;
                    case "*":
                        this.result = parseInt(this.num1) * parseInt(this.num2);
                        break;
                    case "/":
                        this.result = parseInt(this.num1) / parseInt(this.num2);
                        break;
                }
            }
        }
    });
</script>
</body>
</html>

3. v-for实现对象的遍历

使用v-for指令遍历简单数组

<p v-for="name in names">{{name}}</p>
<p v-for="name,index in names" v-text="name+'---'+index"></p>

使用v-for指令遍历对象数组

<p v-for="user in users">id：{{user.id}}---name：{{user.name}}</p>

使用v-for指令遍历对象属性值

<p v-for="value,key in cqCity">{{key+'--'+value}}</p>

使用v-for指令遍历数字（作用就是标准的for循环次数遍历）
```
<p v-for="num,index in 12" v-text="num+'---'+index"></p>
```
注意：
1. 不论遍历任何数据类型，都可以得到值和索引；
2. 遍历的到的值可以使用插值表达式、v-text、v-html显示；
3. 遍历对象属性和值时可以得到：值、属性名字、索引；
4. 值的赋值顺序是：值、【键名】、索引；
5. 一次遍历中，多个结果之间使用,分割即可对应赋值（value,key,index）
6. 遍历数字时数据时从1开始，不能为负；
7. 如果组件的属性的值是一个变量，则必须使用v-bind:或者:进行属性值的绑定；
8. 数组的push()方法用于向数组末尾加入元素，数组的unshift()方法用于向数组最前面加入元素：
  this.users.push({id:this.id,name:this.name,age:this.age});
  this.users.unshift({id:this.id,name:this.name,age:this.age});
9. 在遍历对象数组并结合组件（表单元素）一起使用时，一定要指定唯一的key属性，进行组件和数据的唯一关联，避免被其它操作（指非本元素）影响；

3.1 Vue中的for指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue中的for指令</title>
    <script src="../lib/vue.js" type="text/javascript"></script>
</head>
<body>
    <div id="app">
        <h1>Vue中的for指令</h1>
        <p v-for="name in names">{{name}}</p>
        <hr/>
        <p v-for="name,index in names" v-text="name+'---'+index"></p>
        <hr/>
        <p v-for="user in users" v-text="user"></p>
        <hr/>
        <p v-for="user in users">id：{{user.id}}---name：{{user.name}}---age：{{user.age}}</p>
        <hr/>
        <p v-for="value,key in cqCity">{{key+'--'+value}}</p>
        <hr/>
        <p v-for="num in 12" v-text="num"></p>
        <hr/>
        <p v-for="num,index in 12" v-text="num+'---'+index"></p>

        <h1>Vue中的for指令实现数据绑定</h1>
        <label>id：<input type="text" v-model="id"/></label>
        <label>name：<input type="text" v-model="name"/></label>
        <label>age：<input type="text" v-model="age"/></label>
        <label><button @click="add()">添加人员信息</button></label>
        <p v-for="user in users" :key="user.id">
            <label><input type="checkbox"/>{{user.id}}---{{user.name}}---{{user.age}}</label>
        </p>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el:"#app",
            data:{
                id:'',
                name:'',
                age:'',
                names:["钢铁侠","蜘蛛侠","鹰眼","美国队长","娜塔莎","浩克","奇异博士","黑豹","惊奇队长"],
                users:[
                    {id:1,name:"托尼.斯塔克",age:32},
                    {id:2,name:"布鲁斯.版纳",age:33},
                    {id:3,name:"斯蒂夫罗杰斯",age:35}
                ]
            },
            methods:{
                add(){
                    this.users.unshift({id:this.id,name:this.name,age:this.age});
                }
            }
        });
    </script>
</body>
</html>

4. v-if和v-show指令：

区别：

v-if切换元素状态的具体操作是（创建元素--删除元素）比较消耗创建性能；

v-show切换元素状态的具体操作是（修改css的display样式）比较消耗渲染性能；
使用技巧：

如果该元素会经常显示/隐藏，则使用v-show；

如果该元素默认情况下不会显示（大多数时候不会显示），则使用v-if；
代码技巧：

如果使用vue绑定的方法只有一句代码，则可以直接写在绑定结果中：<button @click="flag=!flag">控制元素的显示隐藏

4.1 使用vue中的v-if和v-show指令实现元素的显示和隐藏

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Vue中的if和show指令</title>
    <script src="../lib/vue.js" type="text/javascript"></script>
</head>
<body>
    <h1>使用vue中的v-if和v-show指令实现元素的显示和隐藏</h1>
    <div id="app">
        <button v-on:click="toggle()">控制元素的显示隐藏</button>
        <button @click="flag=!flag">控制元素的显示隐藏</button>
        <p v-if="flag">我是使用v-if控制的p标签</p>
        <p v-show="flag">我是使用v-show控制的p标签</p>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el:"#app",
            data:{
                flag:true
            },
            methods:{
                toggle(){
                    this.flag = !this.flag;
                }
            }
        });
    </script>
</body>
</html>

以下您可能有感兴趣的文章:

标签： 标签遍历绑定