Vue绑定语法--{{xxx}}----指令

时间：2022-12-14 11:00:56

vue的绑定语法:又叫插值语法

什么是vue的绑定语法

专门在HTML中标记变量的特殊的语法

何时绑定

只要页面中某个元素的内容可能随程序自动变化时，都要用{{变量}}标记

如何绑定

html地盘        |   js地盘       | html地盘

<元素>xxxx{{ 变量或表达式 }}xxx</元素>

绑定语法原理

(1). new Vue()扫描到{{}}后，就会先计算{{}}中变量或表达式的值，然后将计算后的值，填写在{{}}的位置

   (2). 今后在new Vue()只要修改了该变量，new Vue()都会自动重新将变量或表达式的新值填写回html中{{}}的位置.

注意

(1). 在HTML中{{}}中使用变量前不用加this.

   (2). {{}}外是HTML地盘，只能写HTML语法

         {{}}内是JS地盘，可以写合法的js表达式。

{{}}中可以放什么

{{}}中: 和模板字符串的${}完全一样

(1). 可以放: 一切有返回值的js变量或表达式

         比如: 变量、算术计算、三目、函数调用、创建对象、访问数组

   (2). 不可以放: 分支，循环，以及没有返回值的js表达式

案例

<!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="js/vue.js"></script>
</head>
<body>
<div id="app">
<h3>欢迎:{{name}}</h3>
<h3>性别:{{sex==1?"男":"女"}}</h3>
<h3>小计:¥{{(price*count).toFixed(2)}}</h3>
<h3>下单时间:{{new Date().toLocaleString()}}</h3>
<h3>今天星期{{arr[day]}}</h3>
</div>
<script>
var vim = new Vue({
el:"#app",
data:{
name:'gavin',
sex:'1',
price:'10',
count:'1.5',
orderTime: '1614158191101',
arr:['日','一','二','三','四','五','六'],
day:new Date().getDay()
          }
      })
</script>
</body>
</html>

运行结果:


指令{directive}

为什么要用不指令

因为{{}}绝对不是万能的！{{}}只适合于元素的内容随程序发生变化时才能用。

解决方案

除了元素的内容之外，其余的属性或样式也可能随程序发生改变时，就要用指令来代替{{}}绑定变量或表达式。

指令的种类13种

指令1--v-bind

    (1). 什么是: 专门用于标记可能发生变化的属性的特殊指令

    (2). 何时使用: 今后，只要一个元素的属性值随程序自动变化，都应该用v-bind。

                       " "代替了{{ }}的作用

            HTML地盘  |  JS地盘   | HTML地盘

    (3). 如何使用: <元素 v-bind:属性名="变量或js表达式">

    (4). 原理:

    a. 每当new Vue()扫描到v-bind时，就会先计算""中的变量值或js表达式值，然后将计算后的结果当做这个属性的属性值

    b. 每当这个属性依赖的变量被改变时，new Vue()会重新计算""中变量值或js表达式值，自动将新值作为这个属性的属性值

    (5). 简写: 其实，今后"v-bind:"，都可省略为":"

                        " "代替了{{ }}的作用

            HTML地盘  |  JS地盘   | HTML地盘

         <元素 :属性名="变量或js表达式">

    (6). 总结: 今后，只要一个元素的属性值可能随程序自动变化，只要用:绑定属性值即可！

    (7). 示例: 根据PM25的数值不同，页面中显示不同的表情

<!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="js/vue.js"></script>
</head>
<body>

<div id="app">
<img :src="pm25<100?'img/1.png':pm25<200?'img/2.png':pm25<300?'img/3.png':'img/4.png'">
<h3>{{pm25<100?'img/1.png':pm25<200?'img/2.png':pm25<300?'img/3.png':'img/4.png'}}</h3>
</div>

<script>
var vim = new Vue({
el:'#app',
data:{
pm25:'50'
          }
      });//运行后，F12打开控制台，console，输入vm.pm25=数值，观察页面上图片的变化
</script>
</body>
</html>

前端种this的8种不同含义

  1. obj.fun()  this--->obj
  2. new Fun()  this--->new正在创建的子对象
  3. 类型名.prototype.共有方法=function(){  ...  }    

 this--->将来调用这个共有方法的.前的子对象

  1. fun() 和 (function(){  })() 和回调函数中的this--->window
  2. 访问器属性中的this，指访问器属性所在的当前对象。
  3. DOM和jQuery事件处理函数中的this->当前正在触发事件的这个元素对象
  4. jQuery.prototype.自定义函数=function(){

 … this指将来调用这个自定义函数的点前的一个jq子对象 …

 }

  1. Vue中的this都指当前vue对象或当前组件对象。

跨域

跨域的形式

域名不同

从http://www.a.com 向 http://www.b.com发送请求

子级域名不同

从http://oa.gavin.cn 向 http://hr.gavin.cn 发送请求

端口号不同

从http://localhost:8800 向 http://localhost:3000

协议不同

从 http://12306.cn 向 https://12306.cn 发送请求

即使本机内，域名向IP发送请求:

从 http://localhost:3000 向 http://127.0.0.1:3000 发送请求

同源策略-CORS

概念:

浏览器只允许当前网页中的ajax请求使用自己网站的资源,禁止ajax请求使用其他网站的资源

如果使用ajax请求其他网站的资源则报错

报错内容如下:

报错: Access to XMLHttpRequest at 'http://localhost:3000/' from origin 'http://127.0.0.1:5500' has been blocked by CORS policy:

从 源头 'http://127.0.0.1:5500' 到'http://localhost:3000/'的xhr请求被CORS策略阻止了！

No 'Access-Control-Allow-Origin' header is present on the requested resource.

且，又没有在请求的资源上设置'Access-Control-Allow-Origin' 头信息。（所以，无法跨域访问）

解决方案

cors方式:只靠服务器端就能完成

res.writeHead(200,{

... ...  "Access-Control-Allow-Origin": "http://客户端网页所在网址" })

总结

vue开发步骤

(1). 先创建增强版的界面:

a. 整个界面必须包含在一个唯一的父元素下:

通常是<div > b. 可能变化的元素内容用{{自定义变量名}}标记

c. 触发事件的元素用@click="自定义处理函数名"标记

(2). 再创建new Vue()对象,其中el:指向new Vue()要监控的页面区域

(3). 在new Vue()对象内定义模型对象data和methods

a.界面所需的所有变量都放在data中

b.界面所需的所有事件处理函数都放在methods中

标签：

相关文章