Vue 01 -- 数据绑定-插值语法{{值}},v-bind,v-model

数据绑定-插值语法{{值}},v-bind,v-model

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>这里填写标题</title>
<meta name="keywords" content="这里填写关键词" />
<meta name="description" content="这里填写说明内容" />

<script type="text/javascript" src="./vue.js"></script>

<!--
  1.想让vue工作就需要创建vue对象,且传入参数
  2.vue接管的元素依旧符合html规范,但是要同时满足vue语法
  3.vue接管的元素叫root容器,内叫做【vue模板】
-->

<style type="text/css">
<!--CSS样式代码位置-->
</style>

</head>
<body>

这里填写HTML代码
<div id="root">
  <h1 >
  Hello,{{name}}<!--使用双花括号作为vue的数据变量,范围仅限vue接管的元素-->
  年龄:{{age}}
  <a :href="url" target="_blank" >{{name}}</a>
  </h1>
</div>

<script type="text/javascript">
<!--JS代码位置-->
  Vue.config.productionTip = false; //阻止 vue 在启动时生成生产提示
  const a = new Vue({
      el:'#root',   //el指定哪个元素作为vue的使用元素
      data:{//暂时使用data作为数据源
        name:"派大星",
        age:21,
        url:'https//www.baidu.com'
      }
   })
</script>

</body>
</html>

使用v-bind:src="变量"进行单项绑定数据。后续简写为 : ,只有一个冒号加正常的属性名
使用v-model:src="变量"进行双项绑定数据(但只能作用于form表单)
数据写在data里,因为vue中data做了数据代理;


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容