vue2_初识vue
1、初识vue
前置工作(搭建vue环境和安装浏览器调试工具)
①
给浏览器安装Vue Devtools
插件
②
引入 Vue
包,vue包引入有下面两种方式:
页面引入(标签)又分为本地引入和CDN引入(script标签的src是一个在线的链接)
③
(可选)阻止vue在启动时生成生产提示 Vue.config.productionTip = false
(自己创建一个script标签里面设置即可)
④
favicon需要将页签图标放在项目根路径,重新打开就有了(shfit+F5强制刷新)
初识vue
1、想让Vue
工作,就必须创建个Vue
实例, 且要传入一个配置对象;
2、root容器里的代码依然符合html规范
,只不过混入了一些特殊的Vue语法
;
3、root容器里的代码被称为 Vue模板
;
4、Vue实例和容器是一一对应
的,也就是一个vue实例只能绑定一个容器,可以有多个实例,只要不把这些实例都绑定到同一个容器身上即可,也就是绑定给不同容器;
5、真实开发中只有一个Vue实例,并且会配合着组件一起使用;
6、{{xxx}}中的xxx要写js表达式
,且xxx可以自动读取到data
中的所有属性;
注意区分:js表达式和js代码。js表达式是能够产生一个值的,也就是在js代码中可以用一个变量接收的,也属于js代码的一部分。js代码指的就是if、for等。
7、一旦data
中的数据发生改变,那么页面中用到该数据的地方也会自动更新;
hello案例
初始vue
hello: {{name.toUpperCase()}},我在:{{city}}
结果: