VUE 入门基础(2)

二,起步

引用方式可以使用  vue-cli

    <script src="https://unpkg.com/vue/dist/vue.js"></script>

    声明式渲染

      <div id="app">
          {{ message }}
      </div>
      var app = new Vue({
        el:'#app',
        data: {
          message:  'Hello Vue'
        }
      })

  在DOM元素上绑定属性

      <div id="app-2">
        <span v-bind:title="message">
          Hover your mouse over me for a few seconds to see my dynamically bound title!
        </span>
     </div>
    var app2 = new Vue({
      el: '#app-2',
      data: {
          message: 'You loaded this page on ' + new Date()
        }
      })

  v-bind 属性被称为指令,指令带有前缀 v-,以表示他们是Vue.js 提供的特殊属性。

  条件与循环

  控制切换一个元素的显示也相当简单:

  <div id="app-3">
      <p v-if="seen">Now you see me</p>
  </div>
  var app3 = new Vue({
    el: '#app-3',
      data: {
        seen: true
      }
   })

 绑定数据到数组来渲染一个列表

  <div id="app-4>
    <ol>
      <li v-for="todo in todos">
        {{ todo.text }}
      </li>
    </ol>
  </div>
  var app4 = new Vue({
      el: '#app-4',
      data: {
        todos: [
          {text: 'Learn JavaScript'},
          {text: 'Learn Vue'},
          {text: 'Build something awesome'}
        ]
      }
    })

处理用户输入

  用v-on 指令绑定一个监听事件用于调用我们vue实例中定义的方法。

  <div id="app-5">
      <p>{{message}}</p>
      <button v-on:click="reverseMessage">Reverse Message</button>
  </div>
  var app5 = new Vue({
      el: '#app-5',
      data: {
        message: 'Hello Vue.js!'
      },
      methods: {
        reverseMessage: function () {
        this.message = this.message.splict(' ').reverse().join(' ')
      }
    }
  })

用 v-model 指令 在表单和应用状态中做双向数据绑定。

  <div id="app-6">
    <p>{{message}}</p>
    <input v-model="message">
  </div>
  var app6 = new Vue({
    el: '#app-6',
    data: {
      message: 'Hello Vue!'
    }
  })

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏用户2442861的专栏

CSS基础(三):选择器

复合选择器, 由两个选择器直接构成,第一个必须是元素选择器,第二个必须是类选择器和ID选择器,这两个选择器之间不能有空格。

631
来自专栏从零开始学 Web 前端

从零开始学 Web 之 jQuery(一)jQuery的概念,页面加载事件

JavaScript 开发的过程中,处理浏览器的兼容很复杂而且很耗时,于是一些封装了这些操作的库应运而生。这些库还会把一些常用的代码进行封装。

924
来自专栏九彩拼盘的叨叨叨

图片占位服务 Placeholder 写法示例

在做页面时,页面上的一些图片需要找临时图片来占位。Placeholder 提供好用的占位图服务。

1143
来自专栏前端知识分享

第79天:jQuery事件总结(二)

       上一篇讲到jQuery中的事件,深入学习了加载DOM和事件绑定的相关知识,这篇主要深入讨论jQuery事件中的合成事件、事件冒泡和事件移除等内容。

1142
来自专栏闻道于事

CSS样式表基础

层叠样式表:Cascading Style Sheets,是一种用来表现HTML等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态...

2665
来自专栏俞其荣的博客

Vue.js模板方法

28613
来自专栏菩提树下的杨过

silverlight中的几个冷门标记 {x:Null},d:DesignWidth,d:DesignHeight

{x:Null}:用于设置某属性值为Null,比如<Rectangle Fill="{x:Null}" />,其实就相当于<Rectangle />,个人感觉这...

2036
来自专栏一个会写诗的程序员的博客

CSS 弹性布局 flex 属性详解

定义了当flex容器有多余空间时,item是否放大。默认值为0,即当有多余空间时也不放大;可能的值为整数,表示不同item的放大比例,如

863
来自专栏技术博客

JavaScript将iframe中控件的值传到主页面控件中

主要是通过在主页面定义一个传输数据的函数GetData(data),然后在iframe嵌入页面中通过parent.GetData(data),这样即可在GetD...

1054
来自专栏一枝花算不算浪漫

[jQuery学习系列四 ]4-Jquery学习四-事件操作

3879

扫码关注云+社区

领取腾讯云代金券