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双向绑定

简单的理解就是：

model双向绑定：就是当input输入的值改变的时候，调用这个input绑定的model的值也改变
<input type="text" v-model="model_data"> 文本输入的值：{{model_data}}

（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常用的语法（一）

猜你喜欢