1 DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8" />
5 <title>Vue 内置指令title>
6 <script type="text/javascript" src="../js/vue.js">script>
7 <script type="text/javascript" src="../js/day.min.js">script>
8 <style>
9 [v-cloak]{
10 display: None;
11 }
12 style>
13 head>
14 <body>
15
42 <div id="root" v-cloak>
43 <div>你好，{{name}}div>
44 <div v-text="name">你好，div>
45
46 <div v-text="str">div>
47 <div v-html="str">div>
48
49 <h3 v-once>n的初始值：{{n}}h3>
50 <h3>当前n的值：{{n}}h3>
51 <button @click="n++">点我n的值+1button>
52
53 <h3 v-pre>n的初始值：{{n}} 这里加了pre属性后，{{n}}并不会解析h3>
54 div>
55 body>
56
57 <script type="text/javascript" >
58 Vue.config.productionTip = false;// 阻止 vue 在启动时生成生产提示。
59
60 let vm = new Vue({
61 el: "#root",
62 data:{
63 name: 'BaiYeShu',
64 str: '你好，
',
65 n: 1
66 },
67
68 });
69 script>
70 html>
1 DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8" />
5 <title>Vue 自定义指令title>
6 <script type="text/javascript" src="../js/vue.js">script>
7 <script type="text/javascript" src="../js/day.min.js">script>
8
9 head>
10 <body>
11
29 <div id="root" v-cloak>
30 <h2>{{name}}h2>
31 <h2>当前的n值是：<span v-text="n">span>h2>
32 <h2>n放大10倍的值是：<span v-big="n">span>h2>
33 <button @click="n++">点我n+1button>
34 <br />
35 <input type="text" v-big-number="n" >
36 div>
37 body>
38
39 <script type="text/javascript" >
40 Vue.config.productionTip = false;// 阻止 vue 在启动时生成生产提示。
41 Vue.directive('big-number',{ // 全局指令
42 bind(element, binding){
43 element.value = binding.value;
44 },
45 inserted(element, binding){
46 element.setFouse();
47 },
48 update(element, binding){
49 element.value = binding.value;
50 }
51 })
52
53 let vm = new Vue({
54 el: "#root",
55 data:{
56 name: 'BaiYeShu',
57 n: 1
58 },
59 directives:{
60 'big'(element, binding){
61 console.log('big', this); // 这里directives，所有指令相关的函数，this都是window
62 element.innerText = binding.value * 10;
63 },
64 // 'big-number':{ // 局部指令
65 // bind(element, binding){
66 // element.value = binding.value;
67 // },
68 // inserted(element, binding){
69 // element.setFouse();
70 // },
71 // update(element, binding){
72 // element.value = binding.value;
73 // }
74 // }
75 }
76
77 });
78 script>
79 html>