Vue.js常用的语法

Posted 面条请不要欺负汉堡

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue.js常用的语法相关的知识,希望对你有一定的参考价值。

    在一个html文件中,我们直接可以通过script标签引入Vue.js,然后就可以在页面里写Vue.js代码了。我们通过new Vue()构建了一个Vue的实例。

html文件:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>pejeco</title>
</head>
<body>
	<div id="app">
		<p>a</p>
	</div>
<script src="js/vue.js"></script>
<script src="js/app.js"></script>
</body>
</html>

app.js


var app = new Vue(
	el: '#app',
	data: 
		a: 1
	,
	created: function () 
		// `this` 指向 vm 实例
		console.log('a is: ' + this.a)
	,
	methods:
		doSomething:function()
			this.a++;
			console.log(a)
		
	,
	watch:
		'a':function(val,oldVal)
			console.log(val,oldVal)
		
	
);
一.Vue实例初始化的选项配置对象详解

首先双大括号("")会将数据解释为纯文本,而非html。

(1)el表明我们的Vue需要操作哪一个元素下的区域,'#app'表示操作id为app的元素下区域。
(2)data

表示Vue 实例的数据对象,data 的属性能够响应数据的变化。是Vue的核心属性,是Vue绑定数据到HTML标签的数据源泉,另外Vue框架会自动监视data里面的数据变化,自动更新数据到HTML标签上去。

       A.data对象的类型:
   
          a. 类型是Object或者Function。
   
          b.如果是组件对象中,data必须是Function类型。【后面学了组件后就明白了,暂时对组件先放放。】

      B.data的事列

            a.创建普通事列


var vm = new Vue(
  data: data
)
//或是
var vm = new Vue(
  data: 
	a:1,
	b:[]
  
)

          b.组件定义

Vue.extend() 中 data 必须是函数 
var Component = Vue.extend(
  data: function () 
  //这里必须是函数!!!
    return  a: 1 
  
)

(3)created表示实例生命周期中创建完成的那一步,当实例已经创建完成之后将调用其方法。

(4).methods :vue对象方法

类型: [key: string]: Function

methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法,或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
</head>
<body >
<div id="cnt">a</div>
<script src="js/vue.js"></script>
<script>
var app = new Vue(
	el: '#cnt',
	data: 
		a: 1
	,
	methods:
		doSomething:function()
			this.a++;
		
	
);
app.doSomething();
</script>
</body>
</html>
输出的值为2.


(5).watch:设置对象监听的方法

类型: [key: string]: string | Function | Object

一个对象,键是需要观察的表达式,值是对应回调函数。值也可以是方法名,或者包含选项的对象。Vue 实例将会在实例化时调用 $watch(),遍历 watch 对象的每一个属性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
</head>
<body >
<div id="cnt">a</div>
<script src="js/vue.js"></script>
<script>
var app = new Vue(
	el: '#cnt',
	data: 
		a: 1,
		b:2,
		c:3
	,
	watch: 
	    // 监控a变量变化的时候,自动执行此函数
	    a: function (val, oldVal) 
	      	console.log('new: %s, old: %s', val, oldVal)
	    ,
	    // 深度 watcher
	    c: 
	      	handler: function (val, oldVal)  ,
	      	deep: true
	    
	
);
app.a=2;
</script>
</body>
</html>

(6).computed :放的是一些业务逻辑代码,一定要记得return

Vue的计算属性(computed)的属性会自动混入Vue的实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。这就很强大了,再计算属性中定义的函数里面可以直接使用指向了vue实例的this,异常方便的啊

类型: 键:函数  [key: string]: Function | get: Function, set: Function

       当然,可以省略setter,如果省略了setter,那么值就可以是普通函数,但是必须有返回值。

Vue.js学习笔记:计算属性

二.Vue.js常用指令

指令带有前缀 v-,以表示它们是 Vue 提供的特殊属性;当其表达式的值改变时相应地将某些行为应用到 DOM 上。     

      在Vue项目的开发中,我们使用的最多的应该就属Vue的指令了。通过Vue提供的常用指令,我们可以淋漓尽致地发挥Vue数据驱动的强大功能。以下便是图中常用指令的简单介绍:

(1)数据的渲染:v-text,v-html,

v-text: 用于更新绑定元素中的内容,类似于jQuery的text()方法

v-html: 用于更新绑定元素中的html内容,类似于jQuery的html()方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-html与v-text的区别</title>
</head>
<body >
<div id="cnt">
	<div v-html="showHTML"></div>
	<div v-text="showText"></div> 	
</div>
<script src="js/vue.js"></script>
<script>
    var ve=new Vue(
        el:'#cnt',
        data:
            showHTML:'<p><i>v-html:HTML标签将会不会显示,并且文本将会按照标签类型显示</i></p>',
            showText:'<p>v-text:这里我们输出纯文本,HTML标签将会在浏览器上显示</p>'
        
    )
</script>
</body>
</html>

(3)控制模块的隐藏:v-if,v-show

v-if: 用于根据表达式的值的真假条件渲染元素,可以在 Vue 插入/删除元素时自动应用过渡效果。

v-show: 用于根据表达式的值的真假条件显示隐藏元素,切换元素的 display CSS 属性

 Vue.js学习笔记:v-if条件渲染与v-show区别

(5)渲染循环列表:v-for

v-for: 用于遍历数据渲染元素或模板Vue.js学习笔记:v-for循环

(6)事件绑定:v-on

v-on: 用于在元素上绑定事件Vue.js学习笔记:v-no绑定事件

(7)属性绑定:v-bing

v-bind:属性绑定  查看解释说明Vue.js学习笔记:属性绑定 v-bind

 (8)数据绑定:v-model

v-model:用于表单输入与应用状态的双向数据绑定

Vue.js学习笔记:v-model双向绑定

简单的理解就是:

<P>model双向绑定:就是当input输入的值改变的时候,调用这个input绑定的model的值也改变</P>
<P><input type="text" v-model="model_data"> <br/>  文本输入的值:model_data</P>

 (9)v-pre

跳过瓷元素及其子元素,跳过大量没有指令的节点加快编译速度。 

  (10)v-cloak

官方文档:该属性保留在元素上,直到关联的ViewModel完成编译。结合CSS规则,例如[v-cloak] display: none ,该指令可用于隐藏未编译的胡须绑定,直到ViewModel准备好。

在vm未加载之前,html中的插值会存在,影响页面美观。在元素上添加v-cloak并在css中写入[v-cloak]display:none;,vm加载之前,该元素一直隐藏,v-cloak指令存在,vm加载之后,元素显示,v-cloak指令消失

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
    <style>
        [v-cloak]display: none;
    </style>
</head>
<body>
    <div v-cloak>message</div>
</body>
</html>

  (11)v-once

由于p标签有了初始值,第一次渲染时Input 和p都有内容,我们给p加了v-once之后,我们再更新mg的值时,p标签不会发生改变


once顾名思义,一次,也可以加给点击事件,默认只能点击一次


以上是关于Vue.js常用的语法的主要内容,如果未能解决你的问题,请参考以下文章

vue.js 常用语法总结

vue.js 常用语法总结

Vue专题-js常用指令

每次更新路由时调用一个函数 vue.js

在 Vue.js2 中使用哪个生命周期钩子在页面加载时调用函数?

vue.js 键盘enter事件的使用