首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >vue.js 从基础到实战

vue.js 从基础到实战

作者头像
达达前端
发布2019-10-15 16:56:41
5000
发布2019-10-15 16:56:41
举报
文章被收录于专栏:达达前端达达前端

Vue.js 是一套构建用户界面的渐进式框架

快速开始 引入vue.js 即可

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

下载下来 保存到本地 运行更快

声明式渲染

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

v-bind:属性="变量"

<span v-bind:title="message"></span>

data: {
    message: '页面加载于 ' + new Date()
}

条件 v-if

<p v-if="seen">现在你看到我了</p>

data: {
    seen: true
}
<li v-for="todo in todos">{{ todo.text }}</li>

绑定点击事件

<button v-on:click="reverseMessage"></button>

methods: {
    reverseMessage: function () {
    this.message = this.message.split('').reverse().join('')
}

v-model 指令 实现表单输入和应用状态之间的双向绑定

<p>{{ message }}</p>
<input v-model="message">

data: {
    message: 'Hello Vue!'
}
<div id="app">
<p>{{ message }} </p>
<input type = "text" v-on:keyup="test" ref="input"/>
</div>

<script type="text/javascript">
var app = new Vue({
 el: '#app',
 data: {
  message: 'hello'
 },
 methods: {
  test: function () {
  this.message = this.$refs.input1.value;
 }
var vm = new Vue({
  // 选项
})

在实例化 Vue 时,需要传入一个选项对象,它可以包含数据、模板、挂载元素、方法、生命周期钩子等选项。

扩展 Vue 构造器

var MyComponent = Vue.extend({
  // 扩展选项
})
var myComponentInstance = new MyComponent()
var data = { a: 1 }
var vm = new Vue({
  data: data
})
vm.a === data.a // -> true
vm.a = 2
data.a // -> 2
// ... 反之亦然
data.a = 3
vm.a // -> 3
var data = { a: 1 }
var vm = new Vue({
  el: '#example',
  data: data
})
vm.$data === data // -> true
vm.$el === document.getElementById('example') // -> true

created 这个钩子在实例被创建之后被调用

var vm = new Vue({
  data: {
    a: 1
  },
  created: function () {
    // `this` 指向 vm 实例
    console.log('a is: ' + this.a)
  }
})
// -> "a is: 1"

mounted、updated、destroyed

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2019.10.14 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档