Vue.js 知识点总结（入门上手）
文章目录Vue.js 是什么?Vue的第一个简单应用Vue的绑定事件Vue.js 是什么?Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发...
Vue.js 是什么?
Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。
Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
使用vue前要先引入vue，有两种方式可以引入vue：
（1）一种是在线通过javascript 引入cdn
（2）一种是通过npm安装引入
我们这里使用在线引入vue的方法，引入在线版本的vue（当然你也可以直接下载vue.js文件到本地引入）
<script src="https://unpkg.com/vue/dist/vue.js">
</script>
Vue的第一个简单应用
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="hello">
<h1>{{say}}</h1>
</div>
<script>
new Vue({
el:'#hello',//绑定到id为hello的dom上
data:{
say:"hellochanke"
}
})
</script>
在这个小实例中，顺序是:
(1)先引入库
(2) 然后给元素添加id,通过new一个Vue，Vue对象内包含需要绑定的元素(el)和要定义的数据(data)
(3) 当在浏览器查看时，Vue中的data中的say 通过绑定的id为hello的元素传值过去{{say}}的值为hellochanke
Vue的绑定事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue数据绑定演示</title>
</head>
<body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="hello">
你要改变的名字为：<input type="text" v-on:input="changeName">
<h1>{{say}}</h1>
</div>
<script>
new Vue({
el:'#hello',
data:{
say:"数据库爆破专家Kok"
},
methods:{
changeName:function(event){
this.say=event.target.value; //特别注意，这里的say需要用this指定
}
}
})
</script>
</body>
</html>
当点击input框有数值输入后，{{say}}的指向会发生改变，变为event.target.value
前往低代码交流专区
更多推荐
2
0- 0
已为社区贡献2条内容
所有评论(0)