Vue.js简单基础入门学习

Vue.js基础入门学习

废话少说，开门见山是最好学习方式

1. 下载vue的js包，vue.js

官网：https://cn.vuejs.org/

步骤：进入官网--》学习--》教程--》安装--》选下载开发版本 or 直接引入

 

 

建一个简单文件夹，放入当前目录，

 

然后在代码中引入：

<script src="vue.js"></script>

 

2.在<script>标签中创建一个vue实例

 

其中：

new Vue  ---一个vue实例，相当于一个组件

el:"xxx" ----挂载点，对应一个div

template  //---模板

 

3.简单测试一：元素绑定事件，通过数据改变

通过v-on:click或者@click绑定事件

 

{{}} 双花括号显示变量值

data ---数据，变量的定义

methods ----绑定的事件、方法具体实现逻辑

 

4.属性绑定和双向数据绑定

 

5.计算属性和侦听器

 

6.v-if、v-show、v-for的使用