框架学习"/>
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前端框架学习
发布评论