文章目录
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
标签：知识点,Vue,绑定,js,say,vue,引入 来源： https://blog.csdn.net/qq_41136216/article/details/105571511
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。