专栏首页达达前端(24)打鸡儿教你Vue.js

(24)打鸡儿教你Vue.js

学习Vue基础语法 Vue中的组件 Vue-cli的使用

1、使用Vue2.0版本实现响应式编程 2、理解Vue编程理念与直接操作Dom的差异 3、Vue常用的基础语法 4、使用Vue编写TodoList功能 5、什么是Vue的组件和实例 6、Vue-cli脚手架工具的使用 7、但文件组件,全局样式与局部样式

如何创建一个Vue实例:

直接用<script>引入

开发版本和生产版本

使用cdn的形式

<body>
<div id="root">hello world {{msg}}</div>

<script>
new Vue({
 el: '#root',
 data: {
  msg: 'hello world'
 }
})
</script>
</body>

挂载点,模板,实例

Vue实例的挂载点为:

<div id="root">hello world {{msg}}</div>

Vue实例中的数据,事件,方法:

插值表达式:

<body>
 <div id="root">
  <h1>{{number}}</h1>
  <h1 v-text="number"></h1>
  <h1 v-html="number"></h1>
  <div v-on:click="helloClick">{{content}}</div>
  <div @click="helloClick">{{content}}</div>
 </div>

 <script>
  new Vue({
   el: '#root',
   data: {
    msg: 'world',
    number: 123,
    content: 'hello'
   },
   methods: {
     helloClick: function() {
      alert(123)
      this.content = 'world'
     }
   }
  })
</script>
</body>

React,Angular,Vue,Hybrid

属性绑定和双向数据绑定:

<input v-model="content"/>
<div>{{content}}</div>

计算属性和侦听器

<div id="root">
  <input v-model="firstName">
  <input v-model="lastName"/>
  <div> {{firstName}} {{lastName}} </div>
  <div>{{fullName}}</div>
  <div>{{count}}</div>
</div>

<script>
new Vue({
el: '#root',
data: {
firstName: '',
lastName: '',
count: 0
},
 computed: {
  fullName: function() {
   return this.firstName + ' ' + this.lastName
  }
 },
 watch: {
 firstName: function() {
  this.count ++
 },
lastName: function() {
  this.count ++
 },
 fullName: function() {
  this.count ++
 }
 
})
</script>

v-if,v-show,v-for

v-show会隐藏,不会销毁重新创建

image.png

添加Key值可以提升效率

<ul>
<li v-for="item of list" :key="item">{{item}}</li>
</ul>
<li v-for="(item, index) of list" :key="index">{{item}}</li>

v-if控制存在与否 v-show控制显示与否

todoList功能开发:

<body>
<div id="root">
<div>
 <input v-model="inputValue" />
 <button @click="handleSubmit">提交</button>
 </div>
<ul>
<li v-for="(item, index) of list" :key="index">
 {{item}}
</li>
</ul>
</div>

<script>
new Vue({
el: '#root',
data: {
 inputValue: 'hello'
 list: []
},
methods: {
 handleSubmit: function() {
  this.list.push(this.inputValue)
  this.inputValue = ''
 }
} 

})
</script>
template模板

<ul>
<todo-item v-for="(item, index) of list" :key="index" :content="item"></todo-item>
</ul>

<script>
// 定义组件 全局组件
Vue.component('todo-item', {
 props: ['content'],
 template: '<li>{{content}}</li>'
})

// 局部组件
var TodoItem = {
 template: '<li>item</li>'
}

new Vue({
 el; ‘#root’,
 components: {
  'todo-item': TodoItem
 },
 data: {
 inputValue: '',
 list: []
 },
</script>

组件与实例的关系:

Vue.component('todo-item', {
 props: ['content'],
 template: '<li @click="handleClick">{{content}}</li>',
 methods: {
  handleClick: function() {
   alert('clicked')
  }
 }
})

todolist删除功能:


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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 9 种你或许不知道的 Vue 好用小技巧

    这篇文章是将自己知道的一些小技巧,结合查阅资料整理成的一篇文章,如果喜欢的话可以点波赞/关注,支持一下,希望大家看完本文可以有所收获。

    夜尽天明
  • 深入理解Vue组件3大核心概念

    本文主要介绍属性、事件和插槽这三个vue基础概念、使用方法及其容易被忽略的一些重要细节。如果你阅读别人写的组件,也可以从这三个部分展开,它们可以帮助你快速了解一...

    Fundebug
  • CSS 中重要的层叠概念

    最近在项目中遇到了一个问题,menu-bar 希望始终显示在最上面,而在之后的元素都显示在它之下,当时设置了 z-index 也没有效果,不知道什么原因。

    小生方勤
  • 用Vue.js在浏览器中裁剪图像[每日前端夜话0x86]

    Cropping Images In The Browser With Vue.js

    疯狂的技术宅
  • vue 工作中用到一些小技巧

    vm.$watch( expOrFn, callback, [options] )

    冯杰宁
  • 使用electron开发桌面级小程序自动部署系统

    支持部署小程序开发者工具的坑,接下来我将此次开发过程的思考和问题进行总结,从多个角度来介绍本项目。

    李文杨
  • 快速初始化一个mpvue 项目

    mpvue 是一个使用 Vue.js 开发小程序的前端框架。框架基于 Vue.js 核心,mpvue 修改了 Vue.js 的 runtime 和 compil...

    honey缘木鱼
  • 分享 15 个好用 + 实用的 Chrome 扩展

    使用浏览器扩展程序可以使你的工作效率提高数倍不止,那么下面我就向大家分享一下我日常使用的扩展,可能大多数扩展大家都已经在使用了,不过也难免有一两个是你不知道的。

    芋道源码
  • 单点登录该如何实现

    有这么个场景,公司下有多个不同域名的站点,我们期望用户在任意一个站点下登录后,在打开另外几个站点时,也是已经登录的状态,这么一过程就是单点登录。

    小生方勤
  • css3D 全景图 - 含有定位的文字Label

    (adsbygoogle = window.adsbygoogle || []).push({});

    tianyawhl

扫码关注云+社区

领取腾讯云代金券