版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/kingAn123/article/details/79837664
vue框架的搭建和配置,这里不说
当我们需要利用vue框架创建一个项目的时候
创建项目:
在当前项目文件夹下 运行命令行工具
当前文件夹下 shift+右键 “在此处打开命令窗口”
输入npm install vue
安装完成后出现node_modules文件夹和json
创建hellow.html项目
步骤:
Vue数据、视图双向绑定
1、引入vue
- CDN网址引入(项目将需要联网)
- 手动下载到电脑(项目不用联网)
2、在脚本层,定义好Vue实例化构造函数或类(双向绑定的中介)
- 定义“视图”:对象参数输入该实例(视图数据)要作用区的域
- 定义“参数”:对象参数输入该实例(视图数据)要使用的数据
3、在视图层,定义好需要使用数据双向绑定的引用,{{ xxx }}
一、引入vue
<script src="./node_modules/vue/dist/vue.js"></script>
二、脚本层,编写双向绑定的视图数据
<script>
//Vue是内置构造函数,实例
//初始化Vue实例
//构造函数和类使用new初始化
//new Vue() 括号写对象 作为多种参数
let vm = new Vue({
el:'#app', //参数一:本实例作用于哪个视图区域(标签) 用css的选择器
data:{ //参数二:本实例使用到的数据,对象类型。数据会被本变量vm代理
msg:'HelloWord' //data对象里的数据 本来是data.msg获取,但是vm代理了,则可vm.msg获取
}
})
</script>
定义“视图”:对象参数输入该实例(视图数据)要作用区的域 el:’ css选择器 ‘
定义“参数”:对象参数输入该实例(视图数据)要使用的数据 data:{ msg:” , … }
三、视图层
<div id="app">{{msg}}</div>
这里写 {{vm.msg}} 会报错,当前区域(标签)已经与vm绑定了,不可重复写对象名
即这里用的任何变量,对象参数都是vm内的参数或者代理对象(data)的参数
{{}} 内可写“值”“赋值”“三元判断”
结果:
特点:
在浏览器直接输入数据,就可以控制页面,不需要提交和异步
这里是简单页面,在浏览器控制台获取对象属性改变值,得页面改变 vm.msg=”我改变了数据,视图也被改了”
如有建议和疑问可联系
QQ:1017386624
邮箱:1017386624@qq.com
评论前必须登录!
立即登录