• Vue中模板语法与el 和 data 的两种写法

    模板语法

    • 标签语法

      1. //在.html文件中
      2. <body>
      3.     <h3>
      4.         {{name}}
      5.     h3>
      6. body>
      7. <script>
      8.     new Vue({
      9.         el:'#root',
      10.         data:{
      11.             name:'jack',
      12.             url:'网页地址'
      13.         }
      14.     })
      15. script>

    • 指令语法

    • 标签语法和指令语法的简单区分，就是指令语法用v-on,v-bind,v-model指令进行动态绑定。

      1. //在.html文件中
      2. <body>
      3.     //点位这个词的位置为标签体
      4.     <a :href="url">点位a>
      5.     // <a :href="url.toUpperCase()">a>
      6.     // <a :href="url.Date.now()">a>
      7.     // toUpperCase()让网页字母大写
      8.     // Date.now()获取当前的时间戳
      9. body>
      10. <script>
      11.     new Vue({
      12.         el:'#root',
      13.         data:{
      14.             name:'jack',
      15.             url:'网页地址'，
      16.             //避免name重名可以设计多层，school.name于name
      17.             school: {
      18.             name: 'marray'
      19.             }
      20.         }
      21.     })
      22. script>

      数据绑定

    • v-bind可以简写成冒号，只能从data流向页面。而v-model不仅可以从data流向页面，也可以页面刘翔data

      1. //单项数据绑定
      2. <input type="text" v-bind:value = "name" ><br>
      3. //双向数据绑定
      4. <input type="text" v-model:value = "name" ><br>

    • v-model只能应用于表单类元素，如：input、select

    • v-model：value可以简写成v-model.v-model默认就是value值

    el 和 data 的两种写法

    • el的第一种写法，data的第一种写法

      1. <script>
      2.     const v = new Vue({
      3.     el:'#root',
      4.     data: {
      5.     name: '蜜瓜'
      6.     }
      7. })
      8. script>

    • el的第二种写法，data的第二种写法

    • data的第一种写法不用在vue中。

      1. <script>
      2. const v = new Vue({
      3.    // el:'#root',
      4.    //此处的function()不可用箭头函数（=>）代替，因为箭头函数所指示的是window。也就是，this不是vue实例对象了
      5.     data:function(){
      6.         //data中的this是vue实例对象，vue中提供自身运行的文件与带$号，程序员用的文件
      7.         console.log(this)
      8.         return{
      9.         name: '米国'
      10.         }
      11.     }
      12. })
      13. console.log(v)
      14. setTimeout(()=>{
      15.     //$mount为挂载的意思，1000延迟显示1秒钟.此处为el的第二种写法。
      16.     v.$mount('#root'),1000
      17. })
      18. script>
      19. ​

    • MVVM模型

    • mvvm模型是vue作者参考后，创建的Vue

    • M：模型，对应data的数据

    • V: 视图，模板，对应DOM页面

    • VM: 视图模型，对应Vue实例对象

    • 在Vue中V通过VM与M进行双向绑定，M的数据改变V的数据也进行改变

    • MVVM代码对应如下

      1. <body>
      2.     // div包裹的代码为V视图
      3.     <div>
      4.     <h1>{{name}}h1>
      5.     div>    
      6. body>
      7. ​
      8. <script>
      9.     //new Vue为VM视图模型
      10.   const vm = new Vue({
      11.        el: '#root',
      12.     //data对象包裹的区域为M模型，
      13.        data: {
      14.            name: '小米',
      15.         }
      16.    })                                                
      17. script>

    • M模板的属性和vm，都可以直接在V视图中直接使用。

  • 相关阅读:
    WEB逆向—X-Bogus逆向分析(纯算+补环境)
    软考76-上午题-【面向对象技术3-设计模式】-创建型设计模式01
    Dubbo协议详解
    PyTorch深度学习（三）【Logistic Regression、处理多维特征的输入】
    Java SE String类（一）：常用方法（上）
    GEE开发之Modis_NDVI的数据分析
    百度地图实现 区域高亮
    【Spring-MyBatis】数据库字段下划线映射到 java 对象的驼峰式命名属性
    链上治理为何如此重要，波卡Gov 2.0又会如何引领链上治理的发展？
    企业应用架构研究系列三：应用系统集成
  • 原文地址：https://blog.csdn.net/Yyds12300/article/details/134267791