Vue.js系列之一初识Vue
2023-09-11 14:21:53 时间
在看vue.js之前,可以先看这两篇文章,对于为什么要使用vue会有一定帮助
1、 Vue.js !important
2、界面之下:还原真实的MV*模式 !important
本系列文章是基于官方文档,整理的,旨在让新手快速上手.学习vue.js需要一定基础.
一、声明式渲染
1、实现Hello World的功能
还是熟悉的Hello World,下面用Vue.js的声明式渲染来实现
<body> <div id="tDiv"> {{message}} </div> </body> <script type="text/javascript"> var currentPage=new Vue({ el:"#tDiv", //指定绑定的目标dom元素的Id //绑定数据源 data:{ message:"hello World By Vue!" } }); </script>
此时Vue已经将Dom和数据进行了绑定,所有的元素会随着数据的改变而改变,打开当前页面的控制台,在控制台中改变数据,如下图:
2、通过Vue给Html标签添加属性
<body> <div id="test" v-bind:title="message" v-bind:class="message" v-bind:id="message" v-bind:data-id="message" v-bind:src="message" v-bind:href="message" v-bind:align="message"> {{message}} </div> </body> <script type="text/javascript"> var currentPage=new Vue({ el:"#test", data:{ message:"啦啦啦" } }); </script>
同样的,通过控制台修改数据的时候,dom元素也会发生相应的改变.自行实现
二、条件与循环(if语句和for语句在Vue中的使用方式)
1、使用vue的类if语句功能
通过v-if条件指令控制元素的显示隐藏,代码如下:
<body> <div id="tDiv" v-if="seen"> 显示 </div> </body> <script type="text/javascript"> var currentPage=new Vue({ el:"#tDiv", //指定绑定的目标dom元素的Id //绑定数据源 data:{ message:'页面加载于 ' + new Date().toLocaleString(), seen:true } }); </script>
同样在控制台中修改对应的数据,如下图:
结论:上面的例子展示了Vue.Js不仅能将Dom文本绑定到数据,还能将Dom结构绑定到数据
2、使用vue的类for功能
通过v-for指令来遍历数据集合进行展示,代码如下:
<body> <div id="tDiv"> <ul v-for="model in list"> <li>{{model.name}}</li> </ul> </div> </body> <script> var currentPage=new Vue({ el:"#tDiv", //指定绑定的目标dom元素的Id //绑定数据源 data:{ list:[ {id:1,name:"张三"}, {id:2,name:"李四"}, {id:3,name:"王五"} ] } }); </script>
在控制台中给list追加数据,如下图:
会发现ul列表中会多出一条数据,如下图:
三、事件监听
Vue提供了监听Js原生事件的机制,代码如下:
<body> <div id="tDiv"> <p>{{message}}</p> <input type="button" v-on:click="resetPContent" value="点我有惊喜"> </div> </body> <script> var currentPage=new Vue({ el:"#tDiv", //指定绑定的目标dom元素的Id //绑定数据源 data:{ message:"Hello World By Vue" }, methods:{ resetPContent:function(){ this.message=this.message.split('').reverse().join(''); //reverse颠倒数据元素的顺序 } } }); </script>
点击之后,如下图:
注意在resetPContent方法中,更改了数据,相当于改变了应用程序的状态,但是注意这里没有任何操作dom元素的代码,因为所有的dom操作都由vue来进行,这里我们主需要关心数据源.更新dom的操作都由vue来进行.
四、表单输入和应用状态之间的双向绑定
通过v-model指令来实现表单输入和应用状态之间的双向绑定,代码如下:
<body> <div id="tDiv"> <p>{{message}}</p> <input type="text" v-model="message"> </div> </body> <script> var currentPage=new Vue({ el:"#tDiv", //指定绑定的目标dom元素的Id //绑定数据源 data:{ message:"Hello World By Vue" } }); </script>
相关文章
- (尚026)Vue_案例_动态初始化显示(尚025)
- 基于 Vue.js 之 iView UI 框架非工程化实践记要 使用 Newtonsoft.Json 操作 JSON 字符串 基于.net core实现项目自动编译、并生成nuget包 webpack + vue 在dev和production模式下的小小区别 这样入门asp.net core 之 静态文件 这样入门asp.net core,如何
- 【Vue/js】Js中执行变量中的命令语句,也就是所谓的宏替换(很实用的例子)
- Vue.js 使用cordova camera插件调取相机
- Vue - 安装引入 WangEditor V5 富文本编辑器后控制台报错(Nuxt.js 项目同样适用):$attrs is readonly 、 $listeners is readonly
- 最新版教学Vue.js渐进式JavaScript框架
- (29)打鸡儿教你Vue.js
- (24)打鸡儿教你Vue.js
- (15)打鸡儿教你Vue.js
- 关于Vue中main.js,App.vue,index.html之间关系进行总结
- vue项目使用深拷贝
- Vue项目 跨域 解决方案与 vue.config.js 配置解析
- html直接引入vue.js错误(Uncaught ReferenceError: vue is not defined)
- base.js,通用js方法,Js方法封装
- [js高手之路] vue系列教程 - 组件定义与使用上部(7)
- [js高手之路] vue系列教程 - 绑定class与行间样式style(6)
- [js高手之路] vue系列教程 - vue的事件绑定与方法(2)
- [js高手之路] vue系列教程 - vue的基本用法与常见指令(1)
- npm安装vue-cli报错internal/modules/cjs/loader.js(Error: Cannot find module 'D:Programnodejsnode_globalnode_modulesvue-clibinvue')
- Vue-cli 4在vue.config.js中配置别名
- vue中循环table表格数据,可编辑的列表(新增、删除、修改)
- 如何使用@vue/cli 3.0在npm上创建,发布和使用你自己的Vue.js组件库
- Vue.js系列之四计算属性和观察者
- 【VUE】vue配置Gzip压缩