目录
自定义指令
函数式
需求1:定义一个v-big指令,和v-text功能类似,但会把绑定的数值放大10倍
Vue模板语法有2大类:
1.插值语法:
功能:用于解析标签体内容
写法:{ {xxx}},xxx是js表达式,且可以直接读取到data中的所有属性
2.指令语法:
功能:用于解析标签(包括:标签属性、标签体内容、绑定事件......)
举例:v-bind:href="xxx"或简写为:href="xxx".xxx同样要写js表达式
且可以直接读取到data中的所有属性
备注:Vue中有很多的指令,且形式都是:v-????,此处我们只是拿v-bind举个例子
代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自定义指令</title>
<!-- 引入Vue -->
<script type="text/javascript"src="../js/vue.js"></script>
</head>
<body>
<!--
Vue模板语法有2大类:
1.插值语法:
功能:用于解析标签体内容
写法:{
{xxx}},xxx是js表达式,且可以直接读取到data中的所有属性
2.指令语法:
功能:用于解析标签(包括:标签属性、标签体内容、绑定事件......)
举例:v-bind:href="xxx"或简写为:href="xxx".xxx同样要写js表达式
且可以直接读取到data中的所有属性
备注:Vue中有很多的指令,且形式都是:v-????,此处我们只是拿v-bind举个例子
-->
<!--
需求1:定义一个v-big指令,和v-text功能类似,但会把绑定的数值放大10倍
需求2:定义一个v-fbind指令,和v-bind功能类似,但可以让其所绑定的input元素默认获取焦点
-->
<!-- 准备好一个容器 -->
<div id="root">
<h2>{
{name}}</h2>
<h2>当前的n值是:<span v-text="n"></span></h2>
<h2>放大10倍后的n值是:<span v-big="n"></span></h2>
<button @click="n++">点我n+1</button>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip=false//阻止