Vue基础学习

1.Vue快速入门

什么是Vue

Vue是一套用于构建用户界面的渐进式框架，与其他大型框架不同，Vue被设计为可以自底向上逐层应用，Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或已有项目整合，另一方面，当现代化的工具链以及各种支持类库结合使用时，Vue也完全能够为复杂的单页面应用提供驱动

渐进式：从微小型项目到大型项目，都能进行完美的支持
微小型项目，小到一个HTML网页页面，可以引入vue相关依赖js文件，让网页支持Vue功能
大型项目：Vue提供了自己的脚手架，可以快速生成基于Vue的项目提高项目开发效率

只关注视图层：Vue框架是一个用于前端项目开发的框架
如果关注的是数据、业务数据处理，他就是一个服务端应用开发框架，如Express
现代化的工具链：使用Vue教授售价构建单页面应用，可以很方便的完成复杂项目的快捷开发
支持类库：官方和第三方社区给Vue框架提供了丰富的功能插件，可以快捷的完成很多应用功能
为复杂页面应用提供驱动
单页面：Sington Page Appllication，为了提高客户端（浏览器）加载和查看多个页面的速度
Vue给单页面应用提供驱动：Vue可以开发单页面应用，提供了单页面应用开发的相关技术支持

为什么要使用Vue

传统项目开发
优点：所见即所得，HTML、CSS、JS代码，随时编写随时出效果
文件解构简单清晰。.html、.css、.js有效组合
代码解构简单清晰，网页代码、样式代码、脚本代码可以俺早自己想要的方式自由开发
缺点：开发效率低，代码没有一致性

使用Vue开发项目
优点：开发效率非常高
代码规范非常好
引入体积小、使用语法简单、学习门槛低、运行效率高、数据双向绑定

第一个Vue应用

<div id='app'>
<!--使用插值表达式输出msg-->
{{msg}}
</div>

<!--引入vue.js文件-->
<script src='https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js'></script>
<script>
const vm = new Vue({
	//将vue实例挂载到id=app的标签上
	el:'#app',
	//data内部用于存放数据
	data: {
		msg: 'hello'
	}
})
</script>

关于文件引入

传统的引入方式，js代码保存在Html文件本地，js文件和html文件都在一个服务器上
CDN的引入方式，HTML文件中引入js文件存放在网络上的某个CDN服务器上：js文件和html文件不在一个服务器上
CDN：文件分发服务器

2.Vue基础语法

关于Vue实例
Vue应用的核心，就是Vue实例，实例中可以包含多个选项，用于处理不同的业务数据

const vm = new Vue({
	el: '#app',
	data: {
		msg: 'hello'
	}
})

插值表达式

插值表达式就是用来在html视图页面中，输出数据的特殊语法
固定语法格式：{{变量名称}}，也称为mastach语法

  <div id="app" >
        <div>{{msg}}</div>
        <div>{{msg2 + 20}}</div>
        <div>{{msg.split('').reverse().join("")}}</div>
        <div>{{msg2 > 2015?'你好':'你不好'}}</div>
        <div>{{myfn(msg2)}}</div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        const vm = new Vue({
            el:'#app',
            data:{
                msg: 'hellow',
                msg2: 2012
            },
            methods: {
                myfn: (msg2)=>{
                    for(let i=0;i<10;i++) {
                        msg2+=1     
                    }
                    return msg2
                }
            }
        })
    </script>

插值表达式内部支持普通字符串、模板字符串以及字符串拼接，同时支持函数的调用以及运算符使用

指令

指令：实现了特定功能的一种固定语法，一般以v-符号开头，如v-text

v-text/v-html/v-once
{{msg}} ：直接输出变量文本数据，标签不会渲染展示
v-text指令：当成标签的属性进行使用，输出数据的变量包含在属性值中，等价于插值表达式
v-html指令：当成标签属性进行使用，输出的数据中包含的标签会被渲染，使用时注意XSS代码注入
v-once指令：经常和插值表达式在一起结合使用，用于只做一次性数据渲染的操作

   <div id="app">
        <p>{{msg}}</p>
        <p v-text='msg'></p>
        <p v-html='msg'></p>
        <p v-once>{{msg}}</p>
    </div>
    <script src="./vue.js"></script>
    <script>
        const vm = new Vue({
            el:'#app',
            data:{
                msg: '<h1>hello</h1>'
            }
        })
    </script>

v-show/v-if

用于根据条件判断是否渲染展示指定数据的指令
v-show:通过控制display：none|block完成数据隐藏/显示
v-if：通过控制变量是否渲染加载DOM结构完成数据的隐藏/显示
结论：
如果一个数据在页面上频繁的显示/隐藏，需要使用v-show指令
如果一个数据在页面上很少切换显示/隐藏之间的状态，可以使用v-if指令

div id="app">
        <p v-show='msg'>hello</p>
        <p v-if='msg'>hello</p>
    </div>
    <script src="./vue.js"></script>
    <script>
        const vm = new Vue({
            el:'#app',
            data:{
                msg: true
            }
        })
    </script>

v-if/v-for

程序流程控制结构、选择结构、循环结构

   <div id="app">
        <p v-if='userrole===1'>欢饮您尊贵的会员</p>
        <p v-else-if='userrole===2'>欢迎您尊贵的普通会员</p>
        <p v-else>游客</p>
        <ul v-for='item in user' :key='item.id'>
            <li>
                <span>item.id</span>
                <span>item.name</span>
                <span>item.age</span>
            </li>
        </ul>
    </div>
    <script src="./vue.js"></script>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                userrole: 1,
                user: [{
                    id: 1,
                    name: 'zhangsan',
                    age: 20
                }, {
                    id: 2,
                    name: 'lisi',
                    age: 22
                }, {
                    id: 3,
                    name: 'wangwu',
                    age: 23
                }]
            }
        })
    </script>

v-bind

主要用于操作标签属性对象
v-bind简写 ：

<div id="app">
        <img v-bind:src="img_src" alt="">
        <img :src="img_src" alt="">
    </div>
    <script src="./vue.js"></script>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                img_src = '1.img'
            }
        })
    </script>

v-on

主要用于给指定标签绑定对应的事件
v-on简写@

<div id="app">
        <button v-on:click='cha'>{{msg}}</button>
        <button @click='cha'>{{msg}}</button>
    </div>
    <script src="./vue.js"></script>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                msg: '未切换'
            },
            methods: {
                cha: function() {
                    this.msg = '已切换'
                }
            }
        })
    </script>

样式处理

style
style操作样式
数组形式： ：style=’[styleFont,styleColor]’
style=’[hasFont?styleFont:’’,hasColor?styleColor:’’]’
对象形式：：style={color:styleColor,fontSize:style:font}

<div id="app">
        <div :style='[hasFont?styleFont:"",hasColor?styleColor:""]'>nihao</div>
        <div :style='{color:sColor,fontSize:sFont}'>nihaotow</div>
    </div>
    <script src="./vue.js"></script>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                hasFont: true,
                hasColor: true,
                styleFont: {
                    fontSize: '40px'
                },
                styleColor: {
                    color: 'pink'
                },
                sColor: 'red',
                sFont: '60px'

            },
        })
    </script>

class

数组形式 [active,box]
对象形式{active:isActive,box:isBox}

<style>
        .box {
            border: 1px solid;
        }
        
        .active {
            background: green;
        }
    </style>
</head>

<body>
    <div id="app">
        <div :class='[box,active]'>nihao</div>
        <div :class='{active:isActive,box:isBox}'>nihaotow</div>
    </div>
    <script src="./vue.js"></script>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                isActive: true,
                isBox: false,
                box: 'box',
                active: 'active'

            },
        })
    </script>
</body>

Vue语法进阶
Vue功能进阶
Vue组件基础
Vue脚手架
Vue组件化开发（进阶）
VueRouter