目录
前言
Vue框架数据交互的本质是:dom元素的定位与Vue对象内部el的关联,页面的变量与Vue对象内部data的交互,页面dom的js函数与Vue内部methods的关联
第一个完整的Vue程序
<!DOCTYPE heml> <html lang='en'> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Vue基础</title> </head> <body> <div id="app"> { { message }} </div> <!-- 开发环境版本,包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var app = new Vue({ el:"#app", data:{ message:"Hello Vue" } }) </script> </body> </html>
注意:必须进行开发环境版本的声明
el:挂载点 和 data:数据对象
el:挂载点是干什么的?就是声明new的Vue实例对象所管理的数据data在HTML页面中的哪一个dom,#代表id属性
data:数据对象,个人理解HTML中使用插值表达式{ {变量名}},在Vue对象中,就是为变量赋值,然后值就渲染到页面了,可以通过 this在Vue对象的methods中访问到Vue对象中的data数据<div id="app"> { { message }} </div> <!-- 开发环境版本,包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var app = new Vue({ el:"#app", data:{ message:"Hello Vue" } }) </script>
可运行示例代码:
<!DOCTYPE heml> <html lang='en'> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>data数据对象</title> </head> <body> <div id="app"> <!--div是文本组件--> { { message }} <!--获取普通数据对象--> <h2> { { school }} </h2> <!--h2属于标题标签,获取school对象--> <h2> { { school.name }} { { school.mobile }}</h2> <!--获取school对象中的某个属性--> <ul> <!--ul标签属于无序列表标签,与li标签搭配使用,可以将多个li标签内容打印成一个列表--> <li> { { campus }} </li> </ul> <ul> <!--ul标签属于无序列表标签,与li标签搭配使用,可以将多个li标签内容打印成一个列表--> <li> { { campus[0] }} </li> <li> { { campus[1] }} </li> <li> { { campus[2] }} </li> </ul> </div> <!-- 开发环境版本,包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var app = new Vue({ el:"#app", //el是选择挂载元素点 data:{ //data是挂载元素点所需要渲染的内容 //不同属性之间需要用逗号隔开 message:"你好 小黑!", //普通数据类型 school:{ //对象类型,可以理解为结构体 name:"黑马程序员", mobile:"15538779937" }, campus:["北京校区","上海校区","深圳校区"] //数组类型 } }) </script> </body> </html>
v-text指令
v-text指令完成的任务就是将data中值,赋给html页面中挂载点所在的dom元素,有两种表现形式见下
<div id="app"> <h2 v-text=" message+'!' "></h2> <!--形式1:data中变量的值会完全替换整个标签,不管原本存在什么--> <h2>深圳{ {message + "!"}}</h2> <!--形式2:只会用变量值替换差值表达式,不会影响其他原来设定的值--> </div> var app = new Vue({ el:#app, data:{ message:"黑马程序员" } })
可运行示例代码:
<!DOCTYPE heml> <html lang='en'> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>v-text指令</title> </head> <body> <div id="app"> <h2 v-text=" message +'!!!!!' ">这几个字不会显示</h2> <!--空格没有影响--> <h2>{ { message + "!!!!!" }}这几个字会显示</h2> </div> <!-- 开发环境版本,包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var app = new Vue({ el:"#app", data:{ message:"v-text指令" } }) </script> </body> </html>
v-html指令
v-html起作用,是在声明变量值是html语句,比如下述的例子,p标签的内容被解析成为一个a标签
<div id="app"> <p v-html="content"></p> </div> <script> var app = new Vue({ el:"#app", data:{ content:"<a href='