vue前端框架学习

编程入门 行业动态 更新时间:2024-10-22 20:35:37

vue前端<a href=https://www.elefans.com/category/jswz/34/1770644.html style=框架学习"/>

vue前端框架学习

 从简单到复杂他都能应用。

组件化 类似于 后端的模块化。

Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动

vue.js库首先先导入 和导入jQuery一样

一个小案例

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><!-- 2 --><div id="app"><h1>{{name}}</h1></div><script src="../js/vue.js"></script><!-- 1 --><script>/* 3 */const app =new Vue({el: "#app",//选择dom元素data: { // 数据name: "虎哥"},})</script></body>
</html>

    这个案例用到的操作

渲染操作,

双向绑定;

事件处理;

首先说渲染操作, 我们是通过Vue进行渲染.

           

const app =new Vue({el: "#app",//选择dom元素data: { // 数据name: "虎哥"},})

1.我们创建了一个vue对象,

  • 然后构造函数接收一个对象,对象中有一些属性:

    • el:是element的缩写,通过id选中要渲染的页面元素,本例中是一个div

    • data:数据,数据是一个对象,里面有很多属性,都可以渲染到视图中

      • name:这里我们指定了一个name属性

  • 页面中的h2元素中,我们通过{{name}}的方式,来渲染刚刚定义的name属性。

打开页面查看效果:

 总的来说渲染技术利用vue的构造方法里边的el 选择器    dat性值  data里边可以是数字 对象其他 

其中{{  }}  叫做插值表达式 ,可以用作显示数据                                 

 在引入一个案例来说明双向绑定

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><div id="app"><h1>{{msg}}</h1><br/><input name="msg" v-model="msg" /></div><script src="../../js/vue.js"></script><script>const app= new Vue ({el:"#app",data:{msg:"熊熊"},})	</script></body>
</html>

 <input name="msg" v-model="msg" />

这其实是vue指令 vue的指令有很多,暂且不说其她 现在说一下v-model 双向绑定  

  • 我们在data添加了新的属性:msg

  • 在页面中有一个input元素,通过v-model与msg进行绑定。

  • 同时通过{{msg}}在页面输出.                                                                

 在引入一个案例来事件的处理

我们在页面添加一个按钮:同时在data里边加上data一个属性num

<button v-on:click="num++">点我</button>
  • 这里用v-on指令绑定点击事件,而不是普通的onclick,然后直接操作num

  • 普通click是无法直接操作num的。

效果:点击按钮自增数据并显示在输入框上边

致辞一个小小的入门案例说完 后续说一下比较具体系统化的vue的组件指令 生命周期 还有在一些项目中用到多次的vue技术.都将在专刊里陆续更新 .

一些重要的面试在这里更新一下 冒泡时间? 跨域?

更多推荐

vue前端框架学习

本文发布于:2023-06-22 05:14:16,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/34/828239.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:框架   vue

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!