Words etch cherished moments.
OG

Vue初识

4,974 words, 12 min read
2019/06/04 AM
374 views

初学vue时,并不推荐刚开始就直接学习使用脚手架搭建vue项目,而是先学习基础的语法,然后再去学习工程化后搭建项目。

#引入vue

引入vue有两种方式:

  1. 通过script标签的方式直接引入网上获取的 vue源码
  2. 把源码下载到本地,然后再通过script标签的方式引入。
          
  • 1
  • 2
<!-- 这里使用最新版本的vue2.7.16, 开发环境版本,包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>

或者我们在 unpkgcdnjs 上获取 (cdnjs 的版本更新可能略滞后)。打开它,然后复制所有代码存入到一个.js后缀的文件中。

          
  • 1
<script src="./js/vue.2.7.16.js"></script>
          
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue初识</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script> </head> <body> <div id="app"> {{ message }} </div> <script> const app = new Vue({ el: '#app', data() { return { message: 'hello world' } } }) </script> </body> </html>
vue初识
vue初识

看,一个 vue 页面就跑起来了,是不是很简单!

这段代码是一个简单的HTML页面,

  1. const app = new Vue() 创建了一个 Vue 实例,
  2. el 属性指定了页面中的元素 idappdiv 元素作为 Vue 实例的根元素
  3. data() 方法定义了一个数据对象,属性绑定了 message 变量,{{ message }} 插值表达式将变量的值插入到 div 元素中,这样我们只需要修改 message 变量的值,页面中的内容就会自动更新。

#插值表达式

          
  • 1
  • 2
  • 3
<div id="app"> {{ message }} </div>
          
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } })

定义一个message变量,在页面中通过{{message}}显示

#指令

#v-bind

html属性,不管是标签本身自有的属性,还是自定义的属性,都可以通过v-bind指令绑定到html元素上。v-bind指令可以缩写为:

          
  • 1
  • 2
  • 3
<a v-bind:href="url">v-bind:绑定指令</a> <a :href="url">v-bind:绑定指令</a> <span :title="title"></span>
          
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
var app = new Vue({ el: '#app', data: { url: 'https://zhangwurui.cn', title: '页面加载于 ' + new Date().toLocaleString() } })
数据绑定
数据绑定

#v-for

          
  • 1
  • 2
  • 3
<a v-for="(item, i) in list" :key="i"> {{item}} </a>
          
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
var app = new Vue({ el: '#app', data() { return { list: ['HTML', 'CSS', 'JS', 'Vue'] } } })

#v-on

事件方法需要写在Vue实例的methods中,然后通过v-on:绑定事件,v-on:可以缩写为@

          
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
<a v-for="(item, i) in list" :key="i" v-on:click="handleClick"> {{item}} </a> <a v-for="(item, i) in list" :key="i" @click="handleClick"> {{item}} </a>
          
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
var app = new Vue({ el: '#app', data() { return { list: ['HTML', 'CSS', 'JS', 'Vue'] } }, methods: { handleClick() { alert('点击了') } } })
点击事件
点击事件

#v-if、v-else、v-show

          
  • 1
  • 2
  • 3
<a v-if="show">显示哟</a> <a v-else>不显示哟</a> <a v-show="show">显示哟</a>
          
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
var app = new Vue({ el: '#app', data() { return { show: true } } })

#v-html、v-text

通过 v-html 可以渲染 html标签, v-text 只能渲染文本,节点并不会被解析

          
  • 1
  • 2
<div v-html="message"></div> <div v-text="message"></div>
          
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
var app = new Vue({ el: '#app', data() { return { message: '<span style="color:red">我是红色</span>' } } })
渲染
渲染

#v-model

通过 v-model 可以实现数据双向绑定

          
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
<input type="text" v-model="message"> <span>{{ message }}</span> <select name="" id="" v-model="selected"> <option v-for="item in selectdList" :key="item.value" :value="item.value"> {{ item.label }} </option> </select> <span>{{ selected }}</span>
          
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
var app = new Vue({ el: '#app', data() { return { message: '', selected: '', selectdList: [ { label: '请选择', value: 'init' }, { label: '张三', value: 'zhangsan' }, { label: '李四', value: 'lisi' } ] } } })
双向绑定
双向绑定

#修饰符

  1. .lazy:失去焦点时才触发事件
  2. .number:将值转为数字类型
  3. .trim:去除首尾空格
  4. .stop:阻止冒泡
  5. .prevent:阻止默认事件
  6. .capture:事件捕获
  7. .self:事件源为当前元素时才触发事件
  8. .once:事件只触发一次
  9. .passive:事件处理函数在事件捕获阶段执行
  10. .native:监听组件根元素的原生事件

#用法

          
  • 1
  • 2
  • 3
  • 4
  • 5
<input type="text" v-model.trim="message"> <input type="text" v-model.number="message"> <button @click.prevent="handleClick">点击</button> <button @click.stop="handleClick">点击</button> <button @click.self="handleClick">点击</button>
Published at2019/06/04 AMinCode
#Vue
Creative Commons BY-NC 4.0
https://zhangwurui.cn/article/51
0/0comments
Guest
Start the discussion...
Be the first to comment