史上最详细VUE2.0全套demo讲解基础1（模板语法）

最新推荐文章于 2023-11-22 17:21:26 发布

原创

最新推荐文章于 2023-11-22 17:21:26 发布 · 538 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #程序员 #编程 #web前端

本文详述Vue2.0的基础模板语法，包括文本、v-once、纯HTML、属性、JavaScript表达式、修饰符的使用，以及过滤器的应用。作者通过实例演示了如何在Vue中进行数据绑定、事件处理、属性绑定和防止默认行为等，并提供了实用的demo。文章适合初学者，帮助理解Vue的模板语法和常见用法。

一开始在vue1.0的时候我就开始关注掘金的vue专栏，但是一直给我一种感受，真正能静下心来给读者写好每一个细讲，每一个讲解点，我觉得是最重要的，虽然我没有什么能力给大家带来像iview,mint ui等一系列大牛的基础vue带来的ui框架，但是我相信通过我自己一点一点的积累，自己如何去入门一个mvvm框架的时候，慢慢用上所有最常用的api这都是一个积累的过种，这也是我在掘金的第一篇，我只想写一个大家所有所期望的东西

这里还是要推荐下小编的web前端学习群 : 569146385，不管你是小白还是大牛，小编我都欢迎，不定期分享干货，包括小编自己整理的一份最新的web前端资料和0基础入门教程，欢迎初学和进阶中的小伙伴。在不忙的时间我会给大家解惑。

列一个清单吧，其实入门就是基础，如何入门我下面总结一下我展示结的流程，用心去给大家写一个就像我标题写的掘金史上最详细VUE2.0最详细全套讲解（基础篇），听了小编的建议分多次写，把每一细讲透彻讲清楚讲明白，如果反响好的话，我会更加动力快速打造出更多基础篇``组件篇``进阶篇``插件篇``如何为自己公司打造组件，也希望大牛能给我一点错误的指点，小白们能和我一起共同学习进步，我同时也希望大家能看了之后能给我点一个大大的

基础api的讲解，也是根据官方文档讲解，比方说把一些mutation method ，变异方法讲的更白话文一点，让大家更容易的明白
结合工作同时大家会接触的业务场景给出不同的demo,这些demo也是我自己精心在实战中总结出来的
es6在vue中写法的拓展
通过一步一步的学习，此文是浅入深出，给出的demo我们可以复制到自己的电脑上自己跑一遍，跟着自己的想法拓展出别的demo，丰富自己的技术栈

Vue是什么，Vue好在那里，多牛B，也就不说了，既然你进来看了，说明他就是牛B的，整个vue生态圈证明了一切，掘金的发表vue的文章也证明了一切

我所讲的一切都建立在vue-cli 2.2 的脚手架工具里实现

vue-cli安装教程地址https://cn.vuejs.org/v2/guide/installation.html

这样东西我就不详细的讲解了我们主要把核心放在基础部分

但是我要对所写的目录结构说一下

其它我们先不用管，基础部分我们只要对app.vue文件进行改动就可以，然后复制我的demo代码就可以看到所有讲解的demo效果

模板语法

1.文本

数据绑定最常见的形式就是使用 “Mustache” 语法（双大括号）的文本插值：
Mustache 标签将会被替代为对应数据对象上 world 属性的值 ,而且一直会监听world的值，一但改变会跟着改变

应用场景：可以说处处都用的到

<template>
    <div>
        <p>hello {
 
 {world}}</p>
        <p v-text="'hello ' + world"></p>
        <p>{
 
 {`hello ${world}`}}</p>
        <p v-text="`hello ${world}`"></p>
        <button @click="world='ziksang'">改变wrold值</button>
     </div>
</template>

<script>

export default {
     data () {
         return {
              world : "world"
         }
     }
}

</script>

以上用了四种写法
第一种“Mustache” 语法（双大括号）写法
第二种用v-text的指今写法
第三种和第四是对es6写法的拓展写法，称模板字符串