1.3.vue入门案例
1.3.1.HTML模板
在hello-vue目录新建一个HTML
在hello.html中,我们编写一段简单的代码:
<div id="app">
<h2>xx 非常帅</h2>
</div>
h2中要输出一句话:xx 非常帅。前面的xx是要渲染的数据。
1.3.2.vue渲染
然后我们通过Vue进行渲染:
<div id="app"> <h2>{{name}} 非常帅</h2> </div> <script src="./node_modules/vue/dist/vue.js"></script> <script type="text/javascript"> // 生成一个Vue实例 var app = new Vue({ el:"#app", // el,即element。要渲染的的页面元素 data:{ // 数据 name:"xiaohong" } }) </script>
-
首先通过 new Vue()来创建Vue实例
-
然后构造函数接收一个对象,对象中有一些属性:
-
el:是element的缩写,通过id选中要渲染的页面元素,本例中是一个div
-
data:数据,数据是一个对象,里面有很多属性,都可以渲染到视图中
-
name:这里我们指定了一个name属性
-
-
-
页面中的
h2
元素中,我们通过{{name}}的方式,来渲染刚刚定义的name属性。
打开页面查看效果:
更神奇的在于,当你修改name属性时,页面会跟着变化
1.3.3.双向绑定
我们对刚才的案例进行简单修改:
<div id="app"> <input type="text" v-model="num"> <h2> {{name}} 非常帅, 有{{num}}个人喜欢他。 </h2> </div> <script src="./node_modules/vue/dist/vue.js"></script> <script type="text/javascript"> // 生成一个Vue实例 var app = new Vue({ el:"#app", // el,即element。要渲染的的页面元素 data:{ // 数据 name:"xiaohong", num:1 } }) </script>
-
我们在data添加了新的属性:
num
-
在页面中有一个
input
元素,通过v-model
与num
进行绑定。 -
同时通过
{{num}}
在页面输出
我们可以观察到,输入框的变化引起了data中的num的变化,同时页面输出也跟着变化。
-
input与num绑定,input的value值变化,影响到了data中的num值
-
页面
{{num}}
与数据num绑定,因此num值变化,引起了页面效果变化。
没有任何dom操作,这就是双向绑定的魅力。
1.3.4.事件处理
我们在页面添加一个按钮:
<button v-on:click="num++">点我</button>
-
这里用
v-on
指令绑定点击事件,而不是普通的onclick
,然后直接操作num -
普通click是无法直接操作num的。