Vue 模板语法和数据绑定

文章目录

  • 模板语法
  • 数据绑定
  • el的两种写法
  • data的两种写法

模板语法

Vue 模板语法有两大类

  1. 插值语法
    功能:用于解析标签体内容
    写法:{{xxx}},xxx是js表达式,可以读取到 data 中属性
  2. 指令语法
    功能:用于解析标签(标签属性、标签体内容、绑定事件…)
    写法:v-bind:href="xxx" 或简写为 :href="xxx",xxx是js表达式,可以读取到 data 中属性
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue初识title>
    <script type="text/javascript" src="./js/vue.js">script>
head>
<body>
<div id="root">
    <h1>插值语法h1>
    Hello {{name}}
    <h1>语法指令h1>
    <a :href="url">百度a>
div>
<script type="text/javascript">
    new Vue({
        el:"#root",
        data:{
            name:"world",
            url:"https://www.baidu.com"
        }
    })
script>
body>
html>

Vue 模板语法和数据绑定_第1张图片

数据绑定

Vue中有2种数据绑定的方式

  1. 单向绑定(v-bind):数据只能从 data 流向页面

  2. 双向绑定(v-model):数据不仅能从 data 流向页面,还可以从页面流向data

  3. 双向绑定一般都应用在表单类元素上(如: input、select等)

  4. v-model:value 可以简写为v-model,因为 v-model 默认收集的就是 value 值

<body>
<div id="root">
    
    单向数据绑定:<input type="text" v-bind:value="name"><br/>
    双向数据绑定:<input type="text" v-model:value="name"><br/>
    
    单向数据绑定:<input type="text" :value="name"><br/>
    双向数据绑定:<input type="text" v-model="name"><br/>

    
    
div>
<script type="text/javascript">
    new Vue({
        el:"#root",
        data:{
            name:"world",
        }
    })
script>

Vue 模板语法和数据绑定_第2张图片

el的两种写法

第一种写法

new Vue({
        el:"#root",
        data:{
            name:"world",
        }
    })

第二种写法

const x = new Vue({
        data:{
            name:"world",
        }
    })
console.log(x)
x.$mount('#root')

其中 $mount可以在打印的 vue 实例中找到
Vue 模板语法和数据绑定_第3张图片

data的两种写法

第一种写法:对象式

new Vue({
        el: "#root",
        data: {
            name: "world",
        }
    })

第一种写法:函数式

new Vue({
        el: "#root",
        data: function () {
            //此处的this是vue实例对象
            return {
                name: 'world'
            }
        }
    })

或者

new Vue({
        el: "#root",
        data(){
            return {
                name: 'world'
            }
        }
    })

目前学习两种写法都可以,但以后学到组件,必须函数式,否则会报错

另外:不能写成箭头函数,因为 this 就不是 vue 实例对象了,而是全局 window

new Vue({
        el: "#root",
        data: ()=> {
            //此处的this是全局的window
            return {
                name: 'world'
            }
        }
    })

你可能感兴趣的:(Vue学习笔记,vue)