Table of contents
v-text directive: --------------- (equivalent to innerText)
v-html directive (use with caution): -------------------- (equivalent to innerHTML)
v-cloak directive (without value):
v-once directive (without value):
v-pre directive (without value):
We have learned common commands:
v-bind : one-way binding parsing expression, can be abbreviated as: xxx
v-model : two-way data binding
v-for : traverse array/object/string
v-on : bind event listener, can be abbreviated as @
v-if : conditional rendering (dynamically control whether the node exists)
v-else : conditional rendering (dynamically control whether the node exists)
v-show : conditional rendering (dynamically control whether the node is displayed)
v-text directive: --------------- (equivalent to innerText)
1. Function: Render text content to the node where it is located.
2. The difference with the interpolation syntax: v-text will replace all the content in the node, but the interpolation syntax {{xx}} will not.
<body> <!-- 准备好一个容器--> <div id="root"> <div>你好，{ {name}}</div> <div v-text="name"></div> <br> <div>{ {str}}</div> <div v-text="str"></div> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 new Vue({ el: '#root', data: { name: '尚硅谷', str: '<h3>你好啊！</h3>' } }) </script>
v-html directive (use with caution): -------------------- (equivalent to innerHTML)
1. Function: Render the content containing the html structure to the specified node.
2. Differences from interpolation syntax:
(1).v-html will replace all the content in the node, but the interpolation syntax { {xx}} will not.
(2).v-html can identify html structure.
3. Serious attention: v-html has security issues! ! ! !
(1). Dynamically rendering arbitrary HTML on a website is very dangerous and can easily lead to XSS attacks.
(2). Always use v-html on trusted content, never on user-submitted content!
Cookies In the application of page detection, after logging in to the website, the database where the website is located will carry cookies. As long as you get someone else's cookie on this website, you can log in to other people's account
Plugin for cookie import all key-value keys: Cookie-Edior
v-cloak directive (without value):
1. The essence is a special attribute. After the Vue instance is created and takes over the container, the v-cloak attribute will be deleted.
2. Using css with v-cloak can solve the problem of unparsed template { {xxx}} displayed on the page when the network speed is slow .
[v-cloak] {
display: none;
}Lazy loading, if it is placed on the top , it will be blocked, and all the following will not be loaded. If it is placed at the end of the page, the template above will be loaded first.
At this time, we need to use v-cloak to hide it so that the page will not Once the template variable appears during the loading wait,
once it is loaded into the Vue instance, v-cloak will be automatically removed<style> /* 联用css，静态资源没有加载完毕时，把标签隐藏起来，就不会出现没有经过解析的模板了 */ [v-cloak] { display: none; } </style> <body> <!-- 准备好一个容器--> <div id="root"> <!-- v-cloak 是没有值的 --> <h2 v-cloak>{ {name}}</h2> </div> <!-- 延迟加载，如果放上最上面，那么会发生堵塞，下面全部不会加载，如果放在这里，会先加载上面的模板，这个时候，我们需要用v-cloak来隐藏它，使页面不会在加载等待中出现模板变量一旦加载到Vue实例，就会自动把v-cloak去掉 --> <!-- 假如下面的链接，延迟5s回应页面 --> <script type="text/javascript" src="http://localhost:8080/resource/5s/vue.js"></script> </body> <script type="text/javascript"> new Vue({ el: '#root', data: { name: '尚硅谷' } }) </script>
v-once directive (without value):
1. After the initial dynamic rendering of the node where v-once is located, it is regarded as static content. That is, how it changes later, the setting of v-once will not change
2. Future data changes will not cause the update of the v-once structure, which can be used to optimize performance.
3. It is worthless
v-pre directive (without value):
1. Skip the compilation process of the node where it is located.
2. It can be used to skip: nodes that do not use instruction syntax or interpolation syntax will speed up compilation.
3. That is to say, after adding it, Vue will not parse the tag to speed up the compilation
