Vue.js 学习第一节 安装及基础语法认知

Vue.js 学习第一节 安装及基础语法认知

 
 

安装

进入Vue.js的官网 将代码复制下来 建立Vue.js文件

基础语法测试

建立基础js文件


此处显示出data的作用，例如给data里的属性赋值

下面是我们的基础页面代码
要注意一下引用vue.js以及main.js的顺序，如果顺序不对，有可能就会出现错误

我们来看一下生成的效果

页面中的v-if v-model v-show就是Vue.js中自己的指令
此处说一下v-if跟v-show的区别

<input>里为空时 即不显示的后面的内容

此处v-if与v-show的区别是 v-if是当input为空时，后面的内容将消失，即该节点从DOM中删除，而v-show则仅仅是将元素隐藏，该节点仍然存在