vue 笔记

Posted 东方不败--Never

tags:

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

 

1、插值表达式

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
     <script src="vue.min.js"></script>
 </head>
 <body>
 <div id="app">
     name
     name2
 </div>
 
 </body>
 <script type="text/javascript">
     new Vue(
         el:"#app",
         data:
             name:"rer",
             name2:"xxx"
         
     )
 </script>
 </html>

2、v-text、v-html、v-model、v-bind

v-model:双向绑定,绑定模型和视图
v-bind:绑定属性,v-bind:href=""

 <body>
 <div id="app">
     <h6 v-text="name"></h6>
     <div v-html="name2"></div>
     <input type="text" v-model="name"/>name
     <a v-bind:href="ahref">百度一下</a>
 </div>
 
 </body>
 <script type="text/javascript">
     new Vue(
         el:"#app",
         data:
             name:"zd",
             name2:"<input type=\\"text\\">",
             ahref:"http://baidu.com"
         
     )
 </script>
 </html>

 3、v-if、v-show

v-if:是将元素从树模型中增加或者删除。切换消耗大,安全性高。

v-show:相当于display 这个属性。切换消耗小。

 <body>
 <div id="app">
    <h6 v-if="isShow">xiaoqi</h6>
    <h6 v-show="isShow">xiaoqi</h6>
 </div>
 
 </body>
 <script type="text/javascript">
     new Vue(
         el:"#app",
         data:
            isShow:false
 
         
     )
 </script>

4、v-for

以上是关于vue 笔记的主要内容,如果未能解决你的问题,请参考以下文章

VSCode自定义代码片段1——vue主模板

VSCode自定义代码片段——.vue文件的模板

VSCode自定义代码片段(vue主模板)

VSCode自定义代码片段11——vue路由的配置

VSCode自定义代码片段11——vue路由的配置

VSCode自定义代码片段11——vue路由的配置