东莞网站建设(曼哈顿信科),微信公众号免费模板素材网站,无锡专业制作网站,西南城乡建设部网站首页Vue快速入门
Vue.js的引入
要先有一个vue.js文件#xff0c;可以在vue官网下载#xff0c;将其复制到项目中并在html页面中进行引入#xff1a;
在head标签内引入#xff0c;src内是vue的路径
!-- 引入vue.js--script languageJavaScript s…Vue快速入门
Vue.js的引入
要先有一个vue.js文件可以在vue官网下载将其复制到项目中并在html页面中进行引入
在head标签内引入src内是vue的路径
!-- 引入vue.js--script languageJavaScript srcxxxxxxxxx/vue.js/scriptVue的js语法要写在head标签下的下面这个标签内:
下面代码实现了一个简单的alert hello功能
!-- Vue的js可以写在这里--script languageJavaScriptfunction hello() {person.sayHello();}var person new Object();person.pidp001;person.pnamejim;person.sayHello function(){alert(Hello World);}!-- 在窗口加载时触发下面方法--window.onloadfunction(){// 存储一个个键值对注意花括号在里面var vue new Vue({});}/scriptVue中对象的定义
可以向下面这样使用等式的方式直接进行定义与赋值
一个person对象的定义与赋值 var person new Object();person.pidp001;person.pnamejim;person.sayHello function(){alert(Hello World);}也可以像下面这样定义 //对象定义的另一种方式注意花括号后有分号,以逗号分割最后一个属性不带逗号var person {pid : p001,pname : jim,sayHello : function() {alert(Hello World);}};Vue中文本的显示
在vue的语法中定义window.onload中定义var vue new Vue({})并在其中进行定义
headmeta charsetUTF-8titleTitle/titlescript languageJavaScript src../script/vue.js/scriptscript languageJavaScriptwindow.onloadfunction(){var vue new Vue({el : #div0,data : {msg : hello!!!,uname : 请输入}});}/script
/head
body
div iddiv0span{{msg}}/spaninput typetext v-bind:valueuname /
/div
/bodyv-if、v-else、v-show可以控制标签的显示
div iddiv0input typetext v-model:valuenum /
!-- v-if实现简单的成立就显示v-else表示不成立就显示否则的意思成对出现中间不能有任何语句
--div v-ifnum%20 stylewidth:200px;height:200px;background-color: chartreusenbsp;/div
!-- 这里不能有任何语句--div v-elsenum%20 stylewidth:200px;height:200px;background-color: coralnbsp;/div!-- v-show也有v-if的效果但其在语句不成立时会在后面添加displaynone即不显示语句而v-if则会直接将语句不生效看起来和删除一样
--div v-shownum%20 stylewidth:200px;height:200px;background-color: cornflowerbluenbsp;/div
/divv-on:click可以实现点击后方法的调用 script languageJavaScript
!-- 在初始化窗口时的做法--window.onloadfunction(){var vue new Vue({el : #div0,data : {msg : hello world},//vue中的方法写在这里methods : {// 将字符串反转的方法示例myReverse : function() {//将字符串全部拿出来反转再拼接this.msg this.msg.split().reverse().join();}}});}/script
/head
body
div iddiv0span{{msg}}/span
!-- 点击后调用myReverse方法--input typebutton value反转 v-on:clickmyReverse /!-- 也可以这么写--input typebutton value反转 clickmyReverse /
/div
/body侦听
侦听标签当某个属性发生变化时自动执行某个方法
//侦听当其中的属性放生变化时执行对应的方法
watch : {num1:function(newValue) {this.num3 parseInt(this.num2) parseInt(newValue);},num2:function(newValue) {this.num3 parseInt(this.num1) parseInt(newValue);}
}...div iddiv0input typetext v-modelnum1 size2 /input typetext v-modelnum2 size2 /span{{num3}}/span
/div对象加载时间的方法调用 script languageJavaScript src../script/vue.js/scriptscript languageJavaScript
!-- 在初始化窗口时的做法--window.onloadfunction(){var vue new Vue({el : #div0,data : {msg : h1},methods : {changeMsg : function() {this.msg hello world;}},/* vue对象创建之前 */beforeCreate:function(){console.log(beforeCreate:Vue对象创建之前..............);//vue对象创建之前msg属性还没有创建console.log(msg: this.msg);},/* vue对象创建之后 */created:function() {console.log(Created:Vue对象创建之后..............);//vue对象创建之后msg属性被创建并赋值了console.log(msg: this.msg);},/* 数据装载之前意思是数据还没有显示在页面上时 */beforeMount:function() {console.log(Create:数据装载之前.....................);/* 获取span内部的数据 */console.log(msg: document.getElementById(span).innerText);},/* 数据装载之后 */mounted:function() {console.log(Mounted:数据装载之后。。。。。。。。。。。。。。。);console.log(msg: document.getElementById(span).innerText);},/** 以下两个时间的方法只有在数据被改变之后才会调用* *//* 数据更新之前 */beforeUpdate : function() {console.log(数据更新之前...............................);console.log(msg: this.msg);console.log(msg: document.getElementById(span).innerText);},/* 数据更新之后 */updated : function() {console.log(数据更新之后...............................);console.log(msg: this.msg);console.log(msg: document.getElementById(span).innerText);}});}/script
/head
body
div iddiv0span idspan{{msg}}/spaninput typebutton value改变 clickchangeMsg /
/div
/body浏览器控制台的输出如下
Download the Vue Devtools extension for a better development experience:
https://github.com/vuejs/vue-devtools
vue.js:9330 You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html
demo07.html?_ijtg1hbsg8c7bsaafas74jk3juslf:22 beforeCreate:Vue对象创建之前..............
demo07.html?_ijtg1hbsg8c7bsaafas74jk3juslf:24 msg:undefined
demo07.html?_ijtg1hbsg8c7bsaafas74jk3juslf:29 Created:Vue对象创建之后..............
demo07.html?_ijtg1hbsg8c7bsaafas74jk3juslf:31 msg:h1
demo07.html?_ijtg1hbsg8c7bsaafas74jk3juslf:36 Create:数据装载之前.....................
demo07.html?_ijtg1hbsg8c7bsaafas74jk3juslf:38 msg:{{msg}}
demo07.html?_ijtg1hbsg8c7bsaafas74jk3juslf:43 Mounted:数据装载之后。。。。。。。。。。。。。。。
demo07.html?_ijtg1hbsg8c7bsaafas74jk3juslf:44 msg:h1
demo07.html?_ijtg1hbsg8c7bsaafas74jk3juslf:49 数据更新之前...............................
demo07.html?_ijtg1hbsg8c7bsaafas74jk3juslf:50 msg:hello world
demo07.html?_ijtg1hbsg8c7bsaafas74jk3juslf:51 msg:h1
demo07.html?_ijtg1hbsg8c7bsaafas74jk3juslf:56 数据更新之后...............................
demo07.html?_ijtg1hbsg8c7bsaafas74jk3juslf:57 msg:hello world
demo07.html?_ijtg1hbsg8c7bsaafas74jk3juslf:58 msg:hello world
