谷粒商城vue学习1

vue

1.MVVM思想

• M：model 包括数据和一些基本操作
• V：view 视图，页面渲染结果
• VM：View-model，模型与视图间的双向操作（无需开发人员干涉）
• 视图和数据通过VM绑定起来，model里有变化会自动地通过Directives填写到视view中，视图表单中添加了内容也会自动地通过DOM Listeners保存到模型中。

2.安装vue

• 下载js并用
• 或者在VScode控制台使用npm install vue导入。步骤分为：
• 先npm init -y初始化项目，生成了一个package.json文件，说明他是一个npm管理的项目
• 类似于maven的pom.xml
• npm install vue，安装后在项目node_modules里有vue
• 类似maven install拉取远程到本地

3.安装vue的问题

• npm install node-sass报错问题的，移步去前几篇文章。

4.node_modules目录的管理

• 因为要提交给git push等原因，并不想把node_modules也提交上传，文件太大。
• 方式1是在.gitignore文件中指定不上传的文件夹
• 方式2是npm install安装包的时候指定安装的目录。npm install --prefix
• path_to_node_modules放置的目录
• 方式3是在package.json中指定export NODE_PATH='yourdir'/node_modules

5.使用vue

• new Vue
• 在dom中{{name}}代表从模型中放到view中
• v-model实现双向绑定

6.v-text、v-html、v-ref

• 这两个可以使用data数据。而
  123{{}}
  这种写法叫插值表达式，可以计算，可以取值，可以调用函数

7.插值闪烁

• 使用{{}}方式在网速较慢时会出现问题。在数据未加载完成时，页面会显示出原始的{{}}， 加载完毕后才显示正确数据。

8.单向绑定v-bind:

• 问题：花括号只能写在标签体内（<div 标签内> 标签体