前端框架入门之Vue的模版语法与数据单向绑定 数据双向绑定

时间：2024-07-17 07:00:25

目录

vue的模版语法

数据绑定

vue的模版语法

关于模版这个概念

root容器里面被称为模版

我们的语法分为插值语法和插值语法

这样就是实现了插值语法

接下来我们实现指令语法

首先我们写一个a标签

链一个超链接上去

 <h1>指令语法</h1>
    <a href="https://gczdy.blog.****.net/">点我去学习</a>

我们去网页中去查看

我们要让这个地址是动态的

我们要把这个地址存在vue实例当中

我们想的是把url存入

再在容器中去调用

但是我们打开控制台

发现我们在这里放入的是{{url}}

而且我们的控制台有一个警告

我们查看一下这个警告

我们修改一下写法

v-bind

表示绑定的意思

给标签里面的属性去动态的绑定数值

v-bind的意思就是把引号里面的东西拿出来做一个js表达式的处理

就是把这个写在引号里的url看做一个变量

而不是 普普通通的把引号里面的东西看做字符串

那么我们什么时候用插值语法和指令语法呢

插值语法往往用于指定

标签体内容

总结

我们把引号内的内容加载为js表达式源自于

冒号

练习

浏览器页面展示

我们也可以写成这种多级结构

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>初识vue</title>

  <!-- 引入 vue -->
  <script type="text/javascript" src="./js/vue.js"></script>
  
</head>

<body>

  <div id="root">
    <!-- Vue 插值语法-->

    <h1>Hello,{{name}},{{adderss}},{{Date.now()}}</h1>
    <h3>你好 {{id}}</h3>
    <hr/>

    <h1>指令语法</h1>
    <a v-bind:href="url">点我去{{name}}学习</a>


  </div>

  <script type="text/javascript">
    
    //阻止 Vue 在启动时生成生产提示
    Vue.config.productionTip=false;

    //创建 Vue 实例 
    new Vue({
      //用于指定当前 Vue 实例为哪个容器服务 值通常为 css 选择器字符串
      el:'#root',
      //data 中用于存储数据 数据供 el 所指定的容器去使用
      //数值我们暂时先写成一个对象
      data:{
        name:'博客',
        adderss:'北京昌平',
        id:'jack',
        url:'https://gczdy.blog.****.net/'
      }
    })

  </script>

</body>

</html>

数据绑定

页面展示

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>初识vue</title>

  <!-- 引入 vue -->
  <script type="text/javascript" src="./js/vue.js"></script>
  
</head>

<body>

  <div id="root">
    <!-- Vue 插值语法-->
    单向数据绑定 <input type="text" v-bind:value="name">

  </div>

  <script type="text/javascript">
    
    //阻止 Vue 在启动时生成生产提示
    Vue.config.productionTip=false;

    //创建 Vue 实例 
    new Vue({
      el:'#root',
      data:{
        name:'尚硅谷'
      }
    }) 

  </script>

</body>

</html>

我们找vue的开发者工具

查看信息

去控制台找找这个信息

document.querySelector("input").value

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>初识vue</title>

  <!-- 引入 vue -->
  <script type="text/javascript" src="./js/vue.js"></script>
  
</head>

<body>

  <div id="root">

    <!-- Vue 插值语法-->
    单向数据绑定 <input type="text" v-bind:value="name">
    双向数据绑定 <input type="text" v-model:value="name">

  </div>

  <script type="text/javascript">
    
    //阻止 Vue 在启动时生成生产提示
    Vue.config.productionTip=false;

    //创建 Vue 实例 
    new Vue({
      el:'#root',
      data:{
        name:'尚硅谷'
      }
    }) 

  </script>

</body>

</html>

我们在这边

双向绑定输入内容

就会发现value值都会进行改变

总结

我们一般表单类元素

采用的是双向绑定

因为这些数值一般都需要我们去捕获

v-model 就是对 value进行分析捕获的

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>初识vue</title>

  <!-- 引入 vue -->
  <script type="text/javascript" src="./js/vue.js"></script>
  
</head>

<body>

  <div id="root">

    <!-- Vue 插值语法-->
    单向数据绑定 <input type="text" v-bind:value="name">
    双向数据绑定 <input type="text" v-model:value="name">

    <!--简写-->
    单向数据绑定 <input type="text" :value="name">
    双向数据绑定 <input type="text" v-model="name">

  </div>

  <script type="text/javascript">
    
    //阻止 Vue 在启动时生成生产提示
    Vue.config.productionTip=false;

    //创建 Vue 实例 
    new Vue({
      el:'#root',
      data:{
        name:'尚硅谷'
      }
    }) 

  </script>

</body>

</html>

个人号推广

博客主页

朱道阳-****博客

Web后端开发

https://blog.****.net/qq_30500575/category_12624592.html?spm=1001.2014.3001.5482

Web前端开发

https://blog.****.net/qq_30500575/category_12642989.html?spm=1001.2014.3001.5482

数据库开发

https://blog.****.net/qq_30500575/category_12651993.html?spm=1001.2014.3001.5482

项目实战

https://blog.****.net/qq_30500575/category_12699801.html?spm=1001.2014.3001.5482

算法与数据结构

https://blog.****.net/qq_30500575/category_12630954.html?spm=1001.2014.3001.5482

计算机基础

https://blog.****.net/qq_30500575/category_12701605.html?spm=1001.2014.3001.5482

回忆录

https://blog.****.net/qq_30500575/category_12620276.html?spm=1001.2014.3001.5482

相关文章