VUE基础

最新推荐文章于 2024-05-20 17:02:17 发布

连累

最新推荐文章于 2024-05-20 17:02:17 发布

阅读量697

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_42688411/article/details/128058043

版权

1.插值表达式

{{}}为插值表达式，数据绑定常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值，Mustache 标签将会被替代为对应数据对象上属性的值。无论何时，绑定的数据对象上属性发生了改变，插值处的内容都会更新。Vue.js 都提供了完全的 JavaScript 表达式支持

这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。有个限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效。

<!-- 这是语句，不是表达式 -->
{{ var a = 1 }}
<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}

2.v-model

v-model指令用在input、select、textarea、checkbox、radio等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值

绘制html，通过双向绑定的技术，获取用户名和密码并输出到页面上

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src ="assets/vue.min-v2.5.16.js"></script>
</head>
<body>
    <!-- v-model双向绑定数据，{{}}为插值表达式。随着绑定数据变化而变化， -->
  <div id="app">
     用户名： <input type="text" v-model="userName" ><br/>
     密码: <input type="password" v-model="pwd"> <br/>
     <button>登录</button> <hr/>
     {{'用户名：'+userName +',密码：'+pwd}}
  </div>
  </body>

   <script>
     new Vue({
         el:'#app',
         data:{
            userName:'admin',
            pwd:'123'
         }
     });
   </script>
</html>

实现效果

2.v-text和v-html

v-text等于设置innerText属性值，v-html等价于设置innerHTML属性值

3.v-bind控制HTML元素属性

<p v-bind:tille="msg"></p>
可以简化为：
<p :title ="msg"></p>

代码示例：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.min-v2.5.16.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- <p v-bind:title="msg">什么是我的最爱？</p> -->
             <!-title标签用来提示作用，鼠标悬浮上会有提示  -->
			<p :title="msg">什么是我的最爱？</p>
		</div>
		<script type="text/javascript">
			new Vue({
				el:'#app',
				data:{
					msg:'我爱北京天安门'
				}
			});
		</script>
	</body>
</html>

实现效果

4.v-on监听DOM事件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>事件处理 v-on示例1</title>
		<script src="js/vuejs-2.5.16.js"></script>
    </head>
    <body>
        <div id="app">
            {{message}}
            <button v-on:click="fun1('good')">点击改变</button>
        </div>
        <script>
            new Vue({
                el:'#app', //表示当前vue对象接管了div区域
                data:{
                    message:'hello world' //注意不要写分号结尾
                },
                methods:{
                    fun1:function(msg){
                        this.message=msg;
                    }
                }
            });
        </script>
    </body>
</html>

v-on简写方式

<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>
<!-- 缩写 -->
<a @click="doSomething">...</a>

实现一个简单的加减乘除运算器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/vue.min-v2.5.16.js"></script>
		<title></title>
	</head>
	<body>
		<div id="vm">
	        <input type="text" v-model="num1">
	        <select v-model="opt">
	            <option value="">==请选择==</option>
	            <option value="0">+</option>
	            <option value="1">-</option>
	            <option value="2">*</option>
	            <option value="3">÷</option>
	        </select>
	        <input type="text" v-model="num2">
	        <input type="button" value="=" @click="cal">
	        <input type="text" v-model="result">
	    </div>
	    <script type="text/javascript">
	        let vm = new Vue({
	            el: "#vm",
	            data: {
	                num1: "", //操作数1
	                num2: "", //操作数2
	                opt: "", //运算符
	                result: "" //保存计算结果
	            },
	            methods: {
	                cal: function () {
	                    switch (vm.opt) {
	                        case "0":
	                            this.result = parseInt(this.num1) + parseInt(this.num2)
	                            break;
	                        case "1":
	                            this.result = this.num1 - this.num2;
	                            break;
	                        case "2":
	                            this.result = this.num1 * this.num2;
	                            break;
	                        case "3":
	                            this.result = this.num1 / this.num2;
	                            break;
	                        default:
	                            alert("请选择运算符");
	                            break
	                    }
	                }
	            }
	        })
	    </script>	
	</body>
</html>

效果如下：

需求分解：
1、绘制HTML
2、使用Vue，在data属性中添加一个楼宇记录列表
3、使用Vue将数据与HTML表格进行双向绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="assets/vue.min-v2.5.16.js"></script>
	</head>
	<body>
		<div id="app">
            <table style="border: 1px solid black;">
                <tr>
                    <th>编号</th>
                    <th>单元</th>
                </tr>

                <tr v-for="b in buildings">
                    <td>{{b.num}}</td>
                    <td>{{b.unit}}</td>
                </tr>
            </table>
        </div>
        <script>
            new Vue({
                el:'#app',
                data:{
                  buildings:[
                      {num:1001,unit:"1单元"},
                      {num:1002,unit:"2单元"},
                      {num:1003,unit:"3单元"}

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

效果如下：

5.v-for和v-if

v-for是循环,用来渲染表格数据，v-if和v-else是条件判断,可以只写v-if

6.v-if：isShow 和v-show区别

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="assets/vue.min-v2.5.16.js"></script>
	</head>
	<body>
		<div id="app">
            <p v-if="isShow">你好，世界</p>
        <button @click="doClick">点我试试</button>

        </div>
        <script>
            new Vue({
                el:'#app',
                data:{
                    isShow:true,
                },
                methods:{
                    doClick(){
                        if(this.isShow){//默认为true
                            this.isShow=false;
                        }else{
                            this.isShow=true;
                        }
                    }
                }
            })
        </script>
	</body>
</html>