目录

简介

安装

 目录结构

起步

 模板语法

条件语句

循环语句

计算属性

监听属性

样式绑定

事件监听

表单

组件

组件自定义事件

自定义指令

简介

Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。

Vue 只关注视图层， 采用自底向上增量开发的设计。

Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

安装

npm install vue

安装脚手架工具（命令行工具）

npm install --global vue-cli

项目打包

npm run build

打包完成后会在目录下生成一个dist目录

一般包含 index.html 文件及 static 目录，static 目录包含了静态文件 js、css 以及图片目录 images。

注意直接打开index文件为空白页，需要修改index文件当中的绝对路径，加上点改为相对路径

改为：

 

之后成功显示： 

 

 目录结构

目录/文件说明
build项目构建(webpack)相关代码
config配置目录，包括端口号等。我们初学可以使用默认的。
node_modulesnpm 加载的项目依赖模块
src

这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：

  • assets: 放置一些图片，如logo等。
  • components: 目录里面放了一个组件文件，可以不用。
  • App.vue: 项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录。
  • main.js: 项目的核心文件。
static静态资源目录，如图片、字体等。
test初始测试目录，可删除
.xxxx文件这些是一些配置文件，包括语法配置，git配置等。
index.html首页入口文件，你可以添加一些 meta 信息或统计代码啥的。
package.json项目配置文件。
README.md项目的说明文档，markdown 格式

起步

<div id="vue_det">
    <h1>site : {{site}}</h1>
    <h1>url : {{url}}</h1>
    <h1>{{details()}}</h1>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: '#vue_det',
        data: {
            site: "菜鸟教程",
            url: "www.runoob.com",
            alexa: "10000"
        },
        methods: {
            details: function() {
                return  this.site + " - 学的不仅是技术，更是梦想！";
            }
        }
    })
</script>

在vue构造器中有一个el，他指定的是一个div的id属性，之后所有的改动都在该div当中

<div id = "vue_det"></div>

 基本的一些数据对象：

 模板语法

Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。

Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。

结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。

数据绑定最常见的形式就是使用 {{...}}（双大括号）的文本插值

<div id="app">
  <p>{{ message }}</p>
</div>

v-html用于输出html代码

<div id="app">
    <div v-html="message"></div>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    message: '<h1>菜鸟教程</h1>'
  }
})
</script>

v-bind根据布尔值修改class属性，该demo为当use为真时，class有一个属性为class1，可缩写为：属性名

div id="app">
  <label for="r1">修改颜色</label><input type="checkbox" v-model="use" id="r1">
  <br><br>
  <div v-bind:class="{'class1': use}">
    v-bind:class 指令
  </div>
</div>
    
<script>
new Vue({
    el: '#app',
  data:{
      use: false
  }
});
</script>

vue支持完整的JavaScript语法。

v-if判断语句

<div id="app">
    <p v-if="seen">现在你看到我了</p>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    seen: true
  }
})
</script>

v-on监听dom事件，v-on:click可缩写为@click

<a v-on:click="doSomething">

v-model双向绑定，v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。

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

过滤器，过滤器函数接受表达式的值作为第一个参数，第二个为对其处理的函数，类似于管道

<div id="app">
  {{ message | capitalize }}
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    message: 'runoob'
  },
  filters: {
    capitalize: function (value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
})
</script>

条件语句

v-if,v-else还可以使用v-else-if

<div id="1" class="testif">
      <div v-if="Math.random() > 0.5">
        生成的随机数大于5
      </div>
      <div v-else>
        生成的随机数不大于5
      </div>
    </div>

v-show属性为布尔值真则展示

<h1 v-show="ok">Hello!</h1>
等于
<h1 v-if="ok">Hello!</h1>

循环语句

<div id="2" class="fortest">
      <ul>
        <li v-for="i in list">
          {{ i }}
        </li>
      </ul>
    </div>

v-for也可以循环对象的属性。第二个值为键值，第一个值为value，第三个值为索引

<div id="app">
  <ul>
    <li v-for="(value, key, index) in object">
     {{ index }}. {{ key }} : {{ value }}
    </li>
  </ul>
</div>

计算属性

该属性与methods定义函数的属性非常相似，但是二者在速度上有本质区别：

我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。

例如我们用函数去修改一个值的时候，重新渲染的时候它总会重新调用执行，而使用computed不会重复调用（例如random写进methods则在重新渲染的时候总会显示不同的数）。

var vm = new Vue({
  el: '#app',
  data: {
    name: 'Google',
    url: 'http://www.google.com'
  },
  computed: {
    site: {
      // getter
      get: function () {
        return this.name + ' ' + this.url
      },
      // setter
      set: function (newValue) {
        var names = newValue.split(' ')
        this.name = names[0]
        this.url = names[names.length - 1]
      }
    }
  }
})
// 调用 setter， vm.name 和 vm.url 也会被对应更新
vm.site = '菜鸟教程 http://www.runoob.com';
document.write('name: ' + vm.name);
document.write('<br>');
document.write('url: ' + vm.url);

监听属性

<div id = "computed_props">
    千米 : <input type = "text" v-model = "kilometers">
    米 : <input type = "text" v-model = "meters">
</div>
<p id="info"></p>
<script type = "text/javascript">
    var vm = new Vue({
    el: '#computed_props',
    data: {
        kilometers : 0,
        meters:0
    },
    methods: {
    },
    computed :{
    },
    watch : {
        kilometers:function(val) {
            this.kilometers = val;
            this.meters = this.kilometers * 1000
        },
        meters : function (val) {
            this.kilometers = val/ 1000;
            this.meters = val;
        }
    }
    });
})
</script>

样式绑定

<div class="static"
     v-bind:class="{ 'active' : isActive, 'text-danger' : hasError }">
</div>

可以传递数组：

<div v-bind:class="[activeClass, errorClass]"></div>

可以使用三元表达式：

<div v-bind:class="[errorClass ,isActive ? activeClass : '']"></div>

事件监听

计数器：

<div id="app">
  <button v-on:click="counter += 1">增加 1</button>
  <p>这个按钮被点击了 {{ counter }} 次。</p>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    counter: 0
  }
})
</script>

事件修饰符：

Vue.js 通过由点 . 表示的指令后缀来调用修饰符。

  • .stop - 阻止冒泡
  • .prevent - 阻止默认事件
  • .capture - 阻止捕获
  • .self - 只监听触发该元素的事件
  • .once - 只触发一次
  • .left - 左键事件
  • .right - 右键事件
  • .middle - 中间滚轮事件
<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联  -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
<div v-on:click.self="doThat">...</div>

<!-- click 事件只能点击一次，2.1.4版本新增 -->
<a v-on:click.once="doThis"></a>

按键修饰符：

<!-- 同上 -->
<input v-on:keyup.enter="submit">
<!-- 缩写语法 -->
<input @keyup.enter="submit">

全部的按键别名：

  • .enter
  • .tab
  • .delete (捕获 "删除" 和 "退格" 键)
  • .esc
  • .space
  • .up
  • .down
  • .left
  • .right
  • .ctrl
  • .alt
  • .shift
  • .meta

表单

 v-model 指令在表单控件元素上创建双向数据绑定。

输入框：

<div id="app">
  <p>input 元素：</p>
  <input v-model="message" placeholder="编辑我……">
  <p>消息是: {{ message }}</p>
    
  <p>textarea 元素：</p>
  <p style="white-space: pre">{{ message2 }}</p>
  <textarea v-model="message2" placeholder="多行文本输入……"></textarea>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    message: 'Runoob',
    message2: '菜鸟教程\r\nhttp://www.runoob.com'
  }
})
</script>

 复选框一个为逻辑值，多个则为数组

<div id="app">
  <p>单个复选框：</p>
  <input type="checkbox" id="checkbox" v-model="checked">
  <label for="checkbox">{{ checked }}</label>
    
  <p>多个复选框：</p>
  <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
  <label for="runoob">Runoob</label>
  <input type="checkbox" id="google" value="Google" v-model="checkedNames">
  <label for="google">Google</label>
  <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
  <label for="taobao">taobao</label>
  <br>
  <span>选择的值为: {{ checkedNames }}</span>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    checked : false,
    checkedNames: []
  }
})
</script>

单选按钮用label指定一个input时指定的是id值

<div id="app">
  <input type="radio" id="runoob" value="Runoob" v-model="picked">
  <label for="runoob">Runoob</label>
  <br>
  <input type="radio" id="google" value="Google" v-model="picked">
  <label for="google">Google</label>
  <br>
  <span>选中值为: {{ picked }}</span>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    picked : 'Runoob'
  }
})
</script>

select列表：

<div id="app">
  <select v-model="selected" name="fruit">
    <option value="">选择一个网站</option>
    <option value="www.runoob.com">Runoob</option>
    <option value="www.google.com">Google</option>
  </select>
 
  <div id="output">
      选择的网站是: {{selected}}
  </div>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    selected: '' 
  }
})
</script>

修饰符：

.lazy

在默认情况下， v-model 在 input 事件中同步输入框的值与数据，但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步：

<!-- 在 "change" 而不是 "input" 事件中更新 -->
<input v-model.lazy="msg" >

.number

如果想自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值），可以添加一个修饰符 number 给 v-model 来处理输入值：

<input v-model.number="age" type="number">

这通常很有用，因为在 type="number" 时 HTML 中输入的值也总是会返回字符串类型。

.trim

如果要自动过滤用户输入的首尾空格，可以添加 trim 修饰符到 v-model 上过滤输入：

<input v-model.trim="msg">

组件

组件（Component）是 Vue.js 最强大的功能之一。

组件可以扩展 HTML 元素，封装可重用的代码。

组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树：

全局组件：

Vue.component(tagName, options)
<tagName></tagName>
    <body>
		<div id="app">
			<test></test>
		</div>
	</body>
	
	<script type="text/javascript">
		Vue.component("test",{
			template:"<h1>test</h1>"
		})
		var vm = new Vue({
			el: '#app',
			
		})
			
	</script>

这里注册了一个test的全局组件，并且定义模板为h1标签。

局部组件：

var Child = { template: '<h1>//自定义组件!</h1>' }定义模板

components: { 'test': Child } // <test> 将只在父模板可用

    <body>
		<div id="app">
			<test2></test2>
		</div>
	</body>
	
	<script type="text/javascript">
		var Child = {
			template:"<h1>test</h1>"
		}
		var vm = new Vue({
			el: '#app',
			components:{
				"test2":Child,
			}
		})
			
	</script>

prop 是子组件用来接受父组件传递过来的数据的一个自定义属性。

父组件的数据需要通过 props 把数据传给子组件，子组件需要显式地用 props 选项声明 "prop"：

    <body>
		<div id="app">
			<test2 test="hello!"></test2>
		</div>
	</body>
	
	<script type="text/javascript">
		var Child = {
			props:["test"],
			template:"<h1>{{test}}</h1>"
		}
		var vm = new Vue({
			el: '#app',
			components:{
				"test2":Child,
			}
		})
			
	</script>

动态prop：

可以使用v-bind实现动态绑定

类似于用 v-bind 绑定 HTML 特性到一个表达式，也可以用 v-bind 动态绑定 props 的值到父组件的数据中。每当父组件的数据变化时，该变化也会传导给子组件：

<div id="app">
    <ol>
    <todo-item v-for="item in sites" v-bind:todo="item"></todo-item>
      </ol>
</div>
 
<script>
Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})
new Vue({
  el: '#app',
  data: {
    sites: [
      { text: 'Runoob' },
      { text: 'Google' },
      { text: 'Taobao' }
    ]
  }
})
</script>

这里使用了v-bind绑定了todo，而todo在父组件中由遍历sites数组获得，之后v-bind动态指定todo的值改变标签值。

组件自定义事件

父组件通过props传递数据给子组件，如果子组件想要向父组件传递数据，则需要使用到自定义事件。

我们可以使用 v-on 绑定自定义事件, 每个 Vue 实例都实现了事件接口(Events interface)，即：

  • 使用 $on(eventName) 监听事件
  • 使用 $emit(eventName) 触发事件

demo:

        <div id="app">
			<p>{{total}}</p>
			<button type="button" @click="addtotal">add</button>
			<test v-on:increment = "addtotal"></test>
			<test v-on:increment = "addtotal"></test>
		</div>
		<script type="text/javascript">
			Vue.component("test",{
				template:"<button v-on:click=incrementHandler>{{count}}</button>",
				data(){
					return {
						count:0
					}
				},
				methods:{
					incrementHandler(){
						this.count += 1
						this.$emit("increment")
					}
				}
			})
			var vm = new Vue({
				el:"#app",
				data:{
					total:0
				},
				methods:{
					addtotal(){
						this.total+=1
					}
				}
			})
		</script>

这个demo在父组件定义了一个total函数，在页面使用p标签展示，定义了一个addtotal方法使total加一，

在子组件当中，定义了一个按钮的模板，并且这个按钮监听点击事件为一个incrementHandler的方法，在该方法当中使count变量加一，并且使用$emit触发事件increment，因而在我们调用子组件的时候，添加该事件为addtotal，可以实现不同按钮不同的点击数，但是都会对总total添加一

自定义组件的v-model

<input 
    :value="parentData"
    @input="parentData = $event.target.value"
>
            <base-checkbox v-model='bool'></base-checkbox>
			<div v-show="bool">
				选中了
			</div>

            
           Vue.component("base-checkbox",{
				model:{
					prop:"checked",
					event:"change"
				},
				props:{
					checked:Boolean
				},
				template:`
					<input
						type = "checkbox"
						v-bind:checked="checked"
						v-on:change="$emit('change', $event.target.checked)"
					>
				`
				
			})
             var vm = new Vue({
				el:"#app",
				data:{
					bool:true
				},
			})

自定义指令

除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令。

demo：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./vue.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<input v-focus/>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el:"#app",
				data:{
					
				},
				directives:{
					focus:{
						inserted:function(el){
							el.focus();
						}
					}
				}
			})
		</script>
	</body>
</html>

这个demo是获取焦点的一个自定义指令

不小心按了Ctrl+z博客全没了， 写一半实在受不了了，不写了，

 

# vue.js # javascript # 前端
Logo
View Design

基于 Vue 的企业级 UI 组件库和中后台系统解决方案，为数万开发者服务。

更多推荐

cover

vue+element ui实现好看的登录界面

avatar ViewDesign

vue3.0中使用elementUi(element-plus的使用)

element-plus的使用小朋友，你是不是有很多问号❓❓❓甲：为什么在vue3.0中不能使用Element UI了？乙：由于vue3.0在插件install函数的入参从Vue原型（类）改成了app（vue实例），导致element-ui中Vue.prototype.* 这样的代码已经全都失效了。所以element-ui铁定是不兼容了。甲：那有什么方法能解决吗？乙：使用Element UI的升级

avatar ViewDesign

ElementUI 整体页面布局

一、概述一般后台页面的顶部导航栏和左侧导航栏一般是固定的，我们可以布局成下面的样式二、整体项目布局因为我们的首页是个公共的组件，点击首页，会员管理，都不会变，所以我们可以放在一个单独文件夹里面。需要分别对头部，左侧区域，主区域拆分成不同的文件。创建项目创建一个全新的ElementUI 项目，请参考链接：https://www.cnblogs.com/xiao987334176/p...

avatar ViewDesign