Vue 快速上手

概述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Vue测试</title>
</head>
<body>
	<div id="app">
	  {{ message }}
	</div>
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>
	<script>
		var app = new Vue({
		  el: '#app',
		  data: {
		    message: 'Hello Vue!'
		  }
		})	
	</script>
</body>
</html>

安装

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

VScode 中需安装 Vue 2 Snippets 插件进行自动补全提示

使用规则概述

{{ message }}       //HTML中的两个大括号用于渲染data中的变量数据
{ active:isActive } //HTML中的单个大括号用于处理逻辑代码
var app = new Vue({ 
    el: '#app',  //el:挂载点、不能挂在至html和body（.app div之类的选择器都可使用）
    data: {      //data:数据对象
        message: 'Hello Vue!'
    },
    methods: {  //用于存放该类的函数
    	fun:function{
    		//do somthing
      }
		} 			
})

常用指令

v-bind指令（可简写成:）

<div id="app">
  <span :title="message">
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
  </span>
  <img src="#" alt="# :class="{active:isActive}> //用于添加或移除类
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: '页面加载于 ' + new Date().toLocaleString()，
    isActive: true
  }
})

v-on指令（可简写成@）

<div id="app">
	<input type="button" value="点击事件" v-on:click="click('双击', 666)">
	<input type="button" value="双击事件" v-on:dblclidk="dblclidk">
	<input type="button" value="鼠标移入事件" @mouseenter="mouseenter">
  <input type="button" value="键盘响应时间" @Kepup.enter="keyup_enter">
</div>

var app = new Vue({
  el: '#app',
  methods: {
      click:function(p1, p2){
		  console.log("单击事件");
	  },
	  dblclidk:function(){
		  console.log("双击事件");
	  },
	  mouseenter:function(){
		  console.log("鼠标移入事件");
	  },
    keyup_enter:function(){
		  console.log("按键响应事件");
	  }
  }
})

v-show和v-if指令

都是用于控制显示和隐藏，区别在于v-show控制的是html的display属性，if用于控制dom元素的显示

<div id="app">
	<img src="#" alt="" v-show="isShow">
	<img src="#" alt="" v-show="age>=18">
	<img src="#" alt="" v-if="isShow">
	<img src="#" alt="" v-if="age>=18">
</div>

var app = new Vue({
  el: '#app',
  data: {
	  isShow: false,
	  age: 16
  }
})

v-for指令

<div id="app">
	<ul>
		<li v-for="item in arr">{{ item }}</li>
	</ul>
	<ul>
		<li v-for="(item, index) in arr">{{ index }}{{item}}</li>
	</ul>
</div>

var app = new Vue({
  el: '#app',
  data: {
	  arr:[1,2,3,4,5]
  }
})

v-model指令

<div id="app">
	<input type="text" v-model="message">
</div>

var app = new Vue({
  el: '#app',
  data: {
	  message: "消息"
  }
})

computed 计算属性

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

过滤器的使用

全局过滤器

<div id="app">
	<h3>全局过滤器：{{ dateTime | dateFormat }}</h3>
</div>

Vue.filter('dateFormat', function(dateStr){
  let dateTime = new Date(dateStr);
  let year = dateTime.getFullYear();
  let month = dateTime.getMonth().toString().padStart(2, '0');
  let day = dateTime.getDay().toString().padStart(2, '0');
  let hour = dateTime.getHours().toString().padStart(2, '0');
  let min = dateTime.getMinutes().toString().padStart(2, '0');
  let sec = dateTime.getSeconds().toString().padStart(2, '0');
  return `${year}-${month}-${day} ${hour}:${min}:${sec}`;
});

局部过滤器

<div id="app">
  <h3>私有过滤器：{{ dateTime | dateFormat2 }}</h3>
</div>

var app = new Vue({
  el: '#app',
  data: {
    dateTime: new Date()
  },
  methods: {
    fun: function(){

    }
  },
  filters: {
    dateFormat2: function (dateStr) {
      let dateTime = new Date(dateStr);
      let year = dateTime.getFullYear();
      let month = dateTime.getMonth().toString().padStart(2, '0');
      let day = dateTime.getDay().toString().padStart(2, '0');
      let hour = dateTime.getHours().toString().padStart(2, '0');
      let min = dateTime.getMinutes().toString().padStart(2, '0');
      let sec = dateTime.getSeconds().toString().padStart(2, '0');
      return `${year}-${month}-${day} ${hour}:${min}:${sec}`;
    }
  }
})

组件的使用

定义组件名的方式有两种：
1. 使用 kebab-case
```
Vue.component('my-component-name', { /* ... */ })
```
当使用 kebab-case (短横线分隔命名) 定义一个组件时，你也必须在引用这个自定义元素时使用 kebab-case，例如。
1. 使用 PascalCase
```
Vue.component('MyComponentName', { /* ... */ })
```
当使用 PascalCase (首字母大写命名) 定义一个组件时，你在引用这个自定义元素时两种命名法都可以使用。也就是说 和 都是可接受的。注意，尽管如此，直接在 DOM (即非字符串的模板) 中使用时只有 kebab-case 是有效的。

posted @ 2020-06-12 15:35 ResJI 阅读(21) 评论(0) 收藏举报

刷新页面返回顶部

ResJI

Vue 快速上手

Vue 快速上手

概述

安装

使用规则概述

常用指令

过滤器的使用

组件的使用

公告