vue的option根属性与指令

Vue.js (读音 /vjuː/，类似于 view) 是一套构建用户界面的渐进式框架。

 

安装与环境部署：https://www.cnblogs.com/stella1024/p/7570884.html  

https://blog.csdn.net/yangxiaodong88/article/details/79930274

安装以上步骤安装好后我们尝试运行一个简单的项目

使用Hbuilder、Sublime Text、或者eclipse等等软件打开该vue项目

创建vue

内容：

修改App.vue

修改后保存，并在浏览器上运行localhost:8080

运行结果：

cmd命令窗口可以看到：

 

每一个vue运用都需要通过实例化vue来实现

语法：

var v = new vue（{

}）

引用相同的对象时，设置属性也会影响到原始数据

可使用$与用户定义的属性区分开来

注意dist文件夹在node_modules的vue文件夹下

v-text:innerText

v-html:innerHTML

v-if:是否插入元素

v-show：是否隐藏元素

v-bind：绑定属性值

v-on:绑定数事件

运行结果：

v-bind：可以给任何属性赋值，是vue到页面的单项数据流

v-model：只能给具备value属性的元素进行双向数据绑定，所以必须使用是有value属性的元素

v-for：

运行结果：

需求：更具成绩等级，以不同的样式输出

运行结果：

运行结果：

行为（methods）、数（data）、视图（template）

template：入口

组件：组合起来的部件

包含组件的就是父组件，被包含的就是子组建

运行结果：

声明子组件，声明子组件依赖，使用子组件

函数传参：

 

函数调用的方式创建组建（了解即可）：

 

综合小demo：

运行结果：

注意注意：双标签的/是在前面    但标签的/是在后面

复习：