<! DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< meta http-equiv = " X-UA-Compatible" content = " IE=edge" >
< meta name = " viewport" content = " width=device-width, initial-scale=1.0" >
< title> vue引入</ title>
< script src = " ../js/vue.js" > </ script>
</ head>
< body>
< div id = " box" >
< h1> hello {{name.toUpperCase()}}</ h1>
< a v-bind: href= " url" > 我要去百度</ a>
</ div>
< script>
Vue. config. productionTip = false ;
new Vue ( {
el : '#box' ,
data : {
name : 'word' ,
url : 'http://www.baidu.com'
}
} )
</ script>
初识
</ body>
</ html>
强制刷新:shift+刷新;不获取缓存,直接去服务器请求数据; const vm = new Vue({});大括号是vue对象(函数)的唯一的参数,参数类型是对象(配置对象);配置对象(key(不可以随便更改):value(规定好的数据类型))的配置(1.el(element):获取元素,值通常为css选择器字符串,类似于js中的document获取元素;2.data:{},值现在是对象,也可能是函数,可以存多组数据(可以是对象),数据是给el指定元素使用的;) Vue实例和它所管理的容器(指定的元素)是一一对应的,如果多出一个一模一样的容器或者实例,则都会找第一个,第二个不会有联系,两个一模一样的实例则会报错;一般开发中只有一个Vue实例,会和组件一起使用; {{}}插值语法:中必须要写js表达式,属性是自动读取实例中的数据;用于指定标签体内的内容(标签里面); 指令语法:v-xxx:遇到v-xxx:属性名=“aaa”,它所赋的值(aaa)就会当做js表达式来执行;v-bind:可以给标签里面的任何一个属性动态的绑定值;简写:v-bind: === : ;用于解析标签(标签属性、标签内容、绑定事件……) hr单标签:产生一条水平方向的线;