vue 30分钟入门秘笈(一)——模板使用

1.使用官方脚手架,获取startup

$ npm install -g @vue-cli
$ vue create my-project
$ cd my-project
$ npm install
$ npm run dev

2.定位基础练习的playground

# 在这里开始你的表演
src/components/HelloWorld.vue

3. html基础模板语法

3.1 基础数值绑定

html

<div>
  <!-- html文本绑定 -->
  <div>{{ message }}</div>
  <!-- html 属性值绑定 -->
  <div :disabled="disabled"></div>
</div>

js

export default {
  data() {
    return {
        message: 'hello world',
        disabled: true,
    }
  }
}

输出

<div>
  <!-- html文本绑定 -->
  <div>hello world</div>
  <!-- html 属性值绑定 -->
  <div :disabled="true"></div>
</div>

3.2 分支模板

html

<div>
  <div v-if="disabled">逻辑true</div>
  <div v-else>逻辑false</div>
</div>

js

export default {
  data() {
    return {
        disabled: true,
    }
  }
}

输出

<div>
  <div>逻辑true</div>
</div>

3.3 列表模板

html

<div>
  <div v-for="item in items" :disabled="item.disabled" >
     <div>{{ item.value }}</div>
  </div>
</div>

js

export default {
  data() {
    return {
        items: [
            { disabled: true,  value: 1 },
            { disabled: false,  value: 2 },
            { disabled: true,  value: 3 },
        ]
    }
  }
}

输出

<div>
  <div disabled="true"><div>1</div></div>
  <div disabled="false"><div>2</div></div>
  <div disabled="true"><div>3</div></div>
</div>

3.4 模板事件处理——点击事件

html

<div>
  <!-- 使用@修饰符表示事件响应 -->
  <div @click="handleClick(event)">click me {{ count }}</div>
</div>

js

export default {
  data () {
    return {
        count: 1
    }
  }
  // 在methods中处理响应流程
  methods: {
    handleClick (event) {
      // 此处为div被点击之后出发的后续逻辑流程
      // 通过this可以指向到data中的模板数据源,修改数据源,模板绑定数据自动更新
      this.count++
    } 
  }
}

4. 【重要】基于vue(mvvm类)与jquery在开发思维模式中的转化

全面颠覆原先面向dom操作的书写方式,转向面向诸如data()中的纯粹数据的编程,dom的视图更新,交给框架来自动解决,由数据来驱动。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 105,376评论 12 126
  • 第3章 基本概念 3.1 语法 3.2 关键字和保留字 3.3 变量 3.4 数据类型 5种简单数据类型:Unde...
    RickCole阅读 2,740评论 0 19
  • 在使用WebStorm时,重新修改了源代码后需要重新启动Node文件后在网页上才可以看到更新,supervisor...
    汤姆的杰瑞阅读 542评论 0 0
  • PHP的命名空间是在5.3.0时引入的,用来按照虚拟目录结构组织PHP的代码。 为什么使用命名空间 总结:为了避免...
    帝都宁阅读 124评论 0 0
  • 亲爱滴们,婊姐已经是大学毕业啦,要自己混饭吃啦,目前的问题就是抉择,有意思的是,婊姐发现身边不知什么时候有了后援团...
    Tamako酱阅读 118评论 0 0