vue的基础语法

------------恢复内容开始------------

1、vue的介绍

渐进式的JavaScript框架

前端三大框架：vue         react        angualr

做者： 尤雨溪  facebook  谷歌公司

文档：中文

 

2、node.js

一、官网下载

二、打开终端cmd：node -v 出现版本号则安装成功

三、下载安装完node自带包管理员npm 和python3的pip3同样

四、使用npm

第一步：要初始化npm的项目：npm init --yes 自动生成一个package.json文件

五、npm install vue@版本号（不加版本号则安装最新版本）--save

　  npm install jquery --save

 

3、vue的使用

一、引包

<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>

二、建立实例化对象

new Vue({
            el: "#app", //目的地，做用在哪里
            data: {
                //数据属性
                //数据驱动视图
                msg: "hello vue"
            }
        });

三、{{ }}：模板语法 插值

{{变量}}

{{1+1}}

{{‘hello’}}

{{函数的调用}}

{{1 == 1 ? '真的' : '假的'}}

四、指令系统： 

1）、v-text 等价于 {{ }}  实现原理：innerText

2）、v_html  实现原理：innerHTML

3）、v-if 是“真正”的条件渲染，由于它会确保在切换条件块内的事件监听器和子组件适当地被销毁和重建，同时它也是惰性的，若是在初始渲染时条件为假，则什么也不作直到条件第一次变为真时，才会开始渲染条件块

4）、v-show 无论初始条件是什么，元素老是会被渲染，而且只是简单地基于css进行切换，所以若是须要很是频繁的切换，则使用v-show，若是运行条件不多改变，则使用v-if

5）、v-for = ‘(item,index) in menuList’

v-for = ‘(ivalue,key) in object’

item指的是数组中每项元素

6）、v-bind 对页面中标签的属性进行绑定，全部的属性均可以进行绑定，注意只要了v-bind后面的字符串必定是数据属性的值

v-bind:属性名（如class、id）= '对象{} | 数组[] | 变量名 | 常量'

在vue中v-bind能够简写为  :class  :src  :id  等同于 v-bind:class  v-bind:src  v-bind:id

7）v-on 在vue中使用v-on:click对当前DOM绑定Click事件，注意：全部的原生js的事件使用v-on均可以绑定

v-if和v-on对页面中DOM进行操做

v-on简写 v-on:click 等同于 @click=‘方法名’

8）、v-bind:class 和v-on对页面中DOM的样式进行切换