百度收录网站与手机版,app 门户网站,做网站没灵感,wordpress word表格第一节 vue.js简介
简介
第二节 vue开发工具
vscode
第三节：vue HelloWorld实现
理解vue双向绑定v-model的概念 底层数据改变视图对应显示会变，视图绑定数据变会影响底层数据，对应MVVM模式http://blog.java1234.com/blog/articles/510.html
!DOCTYPE html
!DOCTYPE html
html lang="en"
headmeta charset="UTF-8"titleTitle/title
/head
body
div id="app"input type="text" v-model="message" /p/pinput type="text" v-bind:value="message" /input type="text" :value="message" /p{{message}}/p
/div
script type="text/javascript" src="./js/vue2.6.js"/script
script type="text/javascript" new Vue({el:'#app',//接管了DOMdata:{message:'vue.js大爷你好！'}})
/script/body
/html
第四节：vue调试工具 vue devtools谷歌插件 安装
http://blog.java1234.com/blog/articles/511.html
第五节：vue模版语法
http://blog.java1234.com/blog/articles/526.htmlvue插值:双大括号{{x}}
v-once指令 一次性插值
html的解析: v-html指令
数据绑定: v-bind指令
js表达式:对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持。 例如，{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
div v-bind:id="'list-' + id"/div
v-bind指令缩写语法为：
!DOCTYPE html
html lang="en"
headmeta charset="UTF-8"titleTitle/title
/head
body
div id="app"h2插值/h2input type="text" v-model="message" /p绑定数据并插值，message会动态改变: {{message}}/pp v-once一次性插值message不会改变: {{message}}/pphtml的解析:span v-html="message2"/span/ph2数据绑定/h2div id="dynamicId"这不是数据绑定/divdiv v-bind:id="dynamicId"这是数据绑定/divdiv :id="dynamicId"这是缩写的数据绑定/divhrbutton v-bind:disabled="isButtonDisabled"Button/buttonbutton :disabled="isButtonDisabled"Button/buttonhra v-bind:href="url"网站/aa :href="url"缩写绑定的网站/ah2js表达式/h2{{number+1}}hr{{ok?'YES':'NO'}}hr{{info.split(' ').reverse().join(',')}}hrh2事件绑定/h2button v-on:click="doSomething"事件绑定/buttonbutton @click="doSomething"事件绑定缩写/button
/div
script type="text/javascript" src="./js/vue2.6.js"/script
script type="text/javascript" new Vue({el:'#app',//接管了DOMdata:{message:'vue.js大爷你好！',message2:'font color="red"呵呵/font',dynamicId:1,isButtonDisabled:true,number:2,ok:true,info:'1 3 5',url:'http://wwww.baidu.com'},methods:{doSomething:()={alert('haha');}}})
/script/body
/html
第六节：vue条件语句
http://blog.java1234.com/blog/articles/527.html
!DOCTYPE html
html lang="en"
headmeta charset="UTF-8"titleTitle/title
/head
body
div id="app"h2v-if/h2h1 v-if="awesome"Vue is awesome/h1h1 v-elseOh no./h1h2template/h2template v-if="ok"h1ok为true/h1ptemplate标签包裹要显示的dom块/ppParagraph 2/p/templatetemplate v-else="ok"h1ok为false/h1ptemplate标签就是要包裹显示的dom块/ppPara
