vue的使用

最新推荐文章于 2024-05-28 09:26:00 发布

一千次晚安。

最新推荐文章于 2024-05-28 09:26:00 发布

阅读量943

点赞数

分类专栏：前端文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_46104231/article/details/121728272

版权

前端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

简介

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

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

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

安装

npm install vue
安装脚手架工具（命令行工具）
npm install --global vue-cli
项目打包
npm run build

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

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

改为：

之后成功显示：

目录结构

目录/文件	说明
build	项目构建(webpack)相关代码
config	配置目录，包括端口号等。我们初学可以使用默认的。
node_modules	npm 加载的项目依赖模块
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博客全没了，写一半实在受不了了，不写了，

一千次晚安。

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
vue的使用

目录简介安装目录结构起步模板语法条件语句循环语句计算属性监听属性样式绑定事件监听表单组件组件自定义事件自定义指令简介Vue.js（读音 /vjuː/, 类似于 view）是一套构建用户界面的渐进式框架。Vue 只关注视图层，采用自底向上增量开发的设计。Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。安装npm install vue安装脚手架工具（命令行工具）..
复制链接

扫一扫