vue的基础语法

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

一、vue的介绍

渐进式的JavaScript框架

前端三大框架：vue         react        angualr

作者： 尤雨溪  facebook  谷歌公司

文档：中文

 

二、node.js

1、官网下载

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

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

4、使用npm

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

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

　  npm install jquery --save

 

三、vue的使用

1、引包

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

2、创建实例化对象

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

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

{{变量}}

{{1+1}}

{{‘hello’}}

{{函数的调用}}

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

4、指令系统： 

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的样式进行切换