代码改变世界

vue基础 知识点

2022-09-05 11:06  ly772186472  阅读(17)  评论(0)  编辑  收藏  举报

1、引入脚本库

<script src="vue.js"></script>

2、数据绑定

<body>
　　<!-- id标识vue作用的范围，绑定的数据必须写在这个div内部 -->
 　 <div id="app">
　　　　<!-- {{}} 插值表达式，声明式渲染，绑定vue中的data数据 -->
 　　　　{{ message }}
</div>
<script src="vue.js"></script>
<script>
        // 创建一个vue对象
        // Vue构造函数的参数是一个配置对象，对象中的key是一些固定的关键字
        new Vue({
 　　　　　　  el: '#app', //绑定vue作用的范围，用id选择器选中div
 　　　　　　data: {
  　　　　　　　　 //在data中注册变量，用于视图中的数据绑定
　　　　　　　　　　　　message: 'Hello Vue!',
 　　　　　　　　 }
  　　　　　　 })
 </script>

这就是声明式渲染：Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统

data:{
  message:"hello world"  
}

也可以写成

data(){ 
  return {
          message:"hellow"  
    }  
}

三、数据绑定指令

 

1、数据绑定指令

 

step1：创建 02-数据绑定指令.html
step2：引入脚本，创建Vue对象
step3：使用数据绑定指令做数据渲染
v-bind: 指令的简写形式

2、双向数据绑定指令

step1：创建 03-双向数据绑定指令.html
step2：将02的代码复制到03
step3：将 v-bind:value 修改成 v-model

什么是双向数据绑定？

  • 当数据发生变化的时候，视图也会跟着发生变化
    • 数据模型发生了改变，会直接显示在页面上
  • 当视图发生变化的时候，数据也会跟着同步变化
    • 用户在页面上的修改，会自动同步到数据模型中去
注意：v-model只用于用户交互组件中