VUE基础

最新推荐文章于 2023-09-25 17:23:56 发布

连累

最新推荐文章于 2023-09-25 17:23:56 发布

阅读量743

点赞数

文章标签： 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>