从简单到复杂他都能应用。
组件化 类似于 后端的模块化。
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技术.都将在专刊里陆续更新 .
一些重要的面试在这里更新一下 冒泡时间? 跨域?
1247
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
