vue入门
Posted chenze-index
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue入门相关的知识，希望对你有一定的参考价值。
一.到vue官网下载vue.js文件；
二.常见指令介绍
1.插值表达式
当模型中的数据发生改变时，那么试图中的数据也对应发生改变
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!--第一步：引入vue.js--> <script src="vue.js"></script> </head> <body> <!--第二步：创建模板--> <div id="app"> <!--插入表达式--> name </div> </body> <!--第三步：创建vue对象--> <script type="text/javascript"> new Vue( //管理边界 el:"#app", data: name:"你好啊" ) </script> </html>
2.v-text
将一个变量的值渲染到指定的元素中
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!--第一步：引入vue.js--> <script src="vue.js"></script> </head> <body> <!--第二步：创建模板--> <div id="app"> <!--v-text--> <h1 v-text="name"></h1> </div> </body> <!--第三步：创建vue对象--> <script type="text/javascript"> new Vue( //管理边界 el:"#app", data: name:"你好啊" ) </script> </html>
v-text 不能识别h1标签
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!--第一步：引入vue.js--> <script src="vue.js"></script> </head> <body> <!--第二步：创建模板--> <div id="app"> <!--v-text不能识别h1标签--> <!--v-html--> <div v-text="vaule"></div> </div> </body> <!--第三步：创建vue对象--> <script type="text/javascript"> new Vue( //管理边界 el:"#app", data: vaule:"<h1>Hello Word!!!</h1>" ) </script> </html>
3.v-html
可以真正输出html元素
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!--第一步：引入vue.js--> <script src="vue.js"></script> </head> <body> <!--第二步：创建模板--> <div id="app"> <!--v-html--> <div v-html="vaule"></div> </div> </body> <!--第三步：创建vue对象--> <script type="text/javascript"> new Vue( //管理边界 el:"#app", data: vaule:"<h1>Hello Word!!!</h1>" ) </script> </html>
4.v-model
实现双向数据绑定
5.v-bind
绑定页面中元素的属性
6.v-if 和 v-show
v-if:
以上是关于vue入门的主要内容，如果未能解决你的问题，请参考以下文章