Vue学习心得记录之模板语法

baiy 发布于2019-08-20 16:09 / 1604人阅读

摘要：下面是我这半年以来总结的学习笔记，帮助自己复习学习的基本用法。全局子组件的注册与属性传递我是个全局子组件用这种数据格式来定义接受的属性名称这样在调用时候就可以传递属性进去今天的笔记学习心得就记录到这里吧第一次用顺利

下面是我这半年以来总结的Vue学习笔记，帮助自己复习学习Vue的基本用法。有需要的同志可以参考下。

Vue的模板语法

Vue有很简单的模板语法,这些Vue指令用来响应式改变渲染DOM可以快速入门上手这个简单的框架。

1.{{}}单向插值表达式，可以把数据从控制器绑定到视图模型

var my = new Vue({
    el: "#app",
   ,
    template: `{{myName}}
           
                   `,
    data() {
        return {         
           myName: "hello vue!",

        }

    },

})

data选项就代表着控制器中的数据信息。

2.属性绑定 v-bind: 缩写为:

           template:`
            hover here
            `

3.v-if与v-show
两者后面都是跟boolean类型变量，v-if会直接在dom结构移除该dom元素，v-show只是加了一个行内样式dislplay:none;该元素还是存在的。
在data属性中声明初始化需要的变量后在模板中渲染。

  data() {
        return {
     
            myName: "hello vue!",
           
            isShow: false,
           

        }

    },

 `show me 
            
  show me`

4.v-for="item in arrOrObject"循环某个DOM.被循环的数据可以是对象也可以是数组item 也可以写作(item ,index)这样就会把对象中的key或者数组中的索引index取出来
注意模板必须只能包含一个根节点

template：

//写法错误


            loop {{item}}

5.事件绑定v-on缩写@ 在methods:{}定义方法
然后就可以在模板中调用

   methods: {
      
        reverse() {
            //console.log(this.message)
            this.message = this.message.split(" ").reverse().join(" ")
        }
    },

 
            {{message}}

6.表单双向绑定

我们可以采用事件绑定的方式间接实现。即定义表单中的keyup事件回调方法，然后在方法中获取到value值，然后赋值给data上的数据

还可以采用v-model快捷实现方法

这本质上就是上一种方法的语法糖。

7.Vue类的data属性必须定义一个函数然后返回一个对象，如果直接使用对象对于数组等的引用赋值就会使得改变了数据值会影响别的地方对它的引用。定义成一个函数返回这样就是把所有的数据复制了一份，不会产生引用赋值的危害。

 data() {
        return {
            message: "this is a boy",
            myName: "hello vue!",
            time: new Date(),
            isShow: false,
            input: "liyu",
            arr: [1, 2, 3, 4, 5, 6, 7, 8, 9],

        }

    },

8.全局子组件的注册与属性传递

Vue.component("child", {
    props: ["title"],
    template: ` 
        {{title}}
        我是个全局子组件
    `
})

用props:[" "]这种数据格式来定义接受的属性名称
这样在调用child时候就可以传递属性进去

今天的笔记学习心得就记录到这里吧！第一次用SegmentFault顺利！

服务器托管专线服务学习心得机器学习心得 hadoop学习心得 java学习心得

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/82751.html

小程序-心理学辞典应用开发的心得

摘要：小程序心理学辞典应用开发的心得前言最近学习小程序，用了五天工作之余从开始，到一个简单的完成，有点心得，记录下来。数据库方面，小程序最近推出云开发的服务，这东西类似，这些后端云服务，而且这些第三方的服务对微信支持的也不错。小程序-心理学辞典应用开发的心得前言最近学习小程序，用了五天工作之余从0开始，到一个简单的App完成，有点心得，记录下来。想法最近在学习算法动态规划那部分，有...

cnTomato 2019-08-23 12:22 评论0 收藏0
理解vue中的组件（一）

摘要：组件是中很重要，这部分也是最难理解的，先聊一聊中的组件。语法组件名选项对象来定义一个下拉框组件请选择北京上海杭州组件的名字就为，在模板中使用组件请选择北京上海杭州在模板中使用组件和正常标签一样。看了Vue的文档，写得很简洁，但是并不简单。在自己学习的过程中踩过不少的坑，学习的时候把官网的例子从头到尾做了一遍，记录在github中https://github.com/WYseven/v...

JasonZhang 2019-08-20 16:09 评论0 收藏0
初学vue.js记录

摘要：初学应该学习哪些知识主要学习基础知识。接下来要学习如何写函数，计算属性。事件处理与修饰符事件通过指令来绑定，在中事件为事件名，所以是很好记忆的。这时可通过来获取父组件传递的值并写入模板，父组件可通过在子组件写入属性的方式传递数据。前言本人刚开始学习vue.js几天，做了一些练习之后，鉴于每隔一段时间就把学习过的内容总结一番，故此写下此文章。初学Vue.js应该学习哪些知识 1、 v...

enda 2019-08-22 15:34 评论0 收藏0
基于React的仿QQ音乐（移动端）

摘要：学习成本很低，另外官方有比较完善的中文文档。简单本身是没有错误，一个东西能以简单的方式解决难道不好吗关于这个中文文档居然还有人喷那些喜欢用的是不是英文能力差，我就再报以呵呵一笑。本身拥有中文文档就是一个优势，结果还成了被喷的地方。前言由于这段时间工作上也是挺忙的，就没有时间去写这个项目，中间一直都是写写停停，进度也是非常慢的。正好前几天都还比较空，就赶紧抓着空闲时间去写这个项目，最...

xiaodao 2019-08-21 16:41 评论0 收藏0
基于React的仿QQ音乐（移动端）

摘要：学习成本很低，另外官方有比较完善的中文文档。简单本身是没有错误，一个东西能以简单的方式解决难道不好吗关于这个中文文档居然还有人喷那些喜欢用的是不是英文能力差，我就再报以呵呵一笑。本身拥有中文文档就是一个优势，结果还成了被喷的地方。前言由于这段时间工作上也是挺忙的，就没有时间去写这个项目，中间一直都是写写停停，进度也是非常慢的。正好前几天都还比较空，就赶紧抓着空闲时间去写这个项目，最...

dreambei 2019-08-05 12:06 评论0 收藏0