vue入门及文本、时间、属性指令

Vue入门

引入方式

① CDN的方式引入

② 下载后导入

其实就是直接在浏览器中打开https://cdn.jsdelivr.net/npm/vue/dist/vue.js，然后复制下来，创建一个js文件再粘贴进去

补充

解释型的语言是需要解释器的

js就是一门解释型语言，只不过js解释器被集成到了浏览器中

所以，在浏览器的Console中输入命令，就和在cmd中输入python后，进入交互式环境一样

vue介绍特性介绍

# vue介绍
Vue (读音 /vju?/，类似于 view) 是一套用于构建用户界面的渐进式框架
与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用
Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合
可以一点一点地使用它，只用一部分，也可以整个工程都使用它
js的框架，跟jq是一类东西
bootstrap：ui框架不是js框架（css样式）
vue中使用ui可以引入bootstrap，elementui(饿了么团队出的)，Vant(移动端ui：有赞)，ant-design-vue（ant-design本身是react的ui库）
# 版本：
	-主流：2.x
  -最新：3.x
# 官方有教程：https://cn.vuejs.org/v2/guide/
# M-V-VM思想 ----》mvc，mtv，mvp：安卓分层架构
Model ：vue对象的data属性里面的数据，这里的数据要显示到页面中，js中变量
View ：vue中数据要显示的HTML页面，在vue中，也称之为“视图模板” （HTML+CSS）
ViewModel：vue中编写代码时的vm对象，它是vue.js的核心，负责连接 View 和 Model数据的中转，保证视图和数据的一致性，所以前面代码中，data里面的数据被显示中p标签中就是vm对象自动完成的（双向数据绑定：JS中变量变了，HTML中数据也跟着改变）
以后不需要显示的使用dom操作，jquery的作用就不大了

# 组件化开发，单页面开发
	-vue项目---》index.html页面---》看到的变化，都是组件的切换
  -页面组件--》放了小组件
  -在index.html中替换 组件，就实现页面的变化

模板语法之插值




    
    插值
    




    
        字符串：{{name}}
        数值：{{age}}
        数组：{{list1}}
        对象：{{obj1}}
        字符串：{{link1}}
        运算：{{10+20+30+40}}
        三目运算符：{{10>20?'是':'否'}}

指令系统之文本指令

指令	释义
v-html	让HTML渲染成页面(可以渲染标签)
v-text	标签内容显示js变量对应的值
v-show	放1个布尔值：为真标签就显示；为假标签就不显示(隐藏)
v-if	放1个布尔值：为真标签就显示；为假标签就不显示(删除)

v-show与 v-if的区别：

v-show：标签还在，只是不显示了（display: none）
v-if：直接操作DOM，删除/插入标签

v-html：让HTML渲染成页面(可以渲染标签)




    
    v-html

v-text：标签内容显示js变量对应的值(不会渲染标签)




    
    v-text

v-show：显示/隐藏内容




    
    第一个vue的html
  


    

    我是show啊

v-if：显示/删除内容




    
    第一个vue的html
  



    我是show啊
    我是if啊

指令系统之事件指令

指令	释义
v-on	触发事件（不推荐）
@	触发事件（推荐）
@[event]	触发event事件（可以是其他任意事件）




    
    v-if
    




    案例：控件通过按钮来控制显示和消失
    
    

    isCreated

属性指令

指令	释义
v-bind	直接写js的变量或语法（不推荐）
:	直接写js的变量或语法（推荐）

v-bind:class=’js变量’可以缩写成：:class=’js变量’




    
    第二天
    
    



    
    
    我是p标签
    
    
    
    我是测试style

Style 和 Class

属性指令中比较特殊的有style和class

class 可以对应字符串，数组(推荐)，对象

写法分别为: 'c1_red c2_green' ，['c1_red', 'c2_green'] ，{c1_red: true}

style 可以对应字符串，数组，对象(推荐)

写法分别为: 'font-size: 50px;text-align: center'，[{fontSize:'50px'}, {textAlign:'center'}]，{fontSize:'50px', textAlign:'center'}




    
    第二天
    
    



    
    
    我是p标签
    
    
    
    我是测试style

条件渲染

指令	释义
v-if	相当于： if
v-else	相当于：else
v-else-if	相当于：else if




    
    第二天



    




您的成绩是
    优秀
    良好
    及格
    不及格

列表渲染

v-if+v-for+v-else控制购物车商品的显示




    
    v-if + v-for + v-else控制购物车商品的显示
    
    



    我的购物车
    
    


    
        
            商品名称
            价格
        
        
            {{item.name}}
            {{item.price}}
        
    
    
        
            商品名称
            价格
        
        
            暂无信息
            暂无信息

v-for遍历数组(列表)、对象(字典)、数字




    
    v-for遍历数组(列表)、对象(字典)
    
    




    数组（列表）for循环遍历
    
        {{index}} —— {{value}}
    

    对象（字典）for循环遍历
    
        {{key}} —— {{value}}
    

    数组（列表）套对象（字典）for循环遍历
    
        
            姓名
            年龄
            性别
            国籍
        
        
            {{info.name}}
            {{info.age}}
            {{info.gender}}
            {{info.country}}

注意！在Vue中：

数组的index和value是反的
对象的key和value也是反的

key值的解释

vue中使用的是虚拟DOM，会和原生的DOM进行比较，然后进行数据的更新，提高数据的刷新速度（虚拟DOM用了diff算法）

在v-for循环数组、对象时，建议在控件/组件/标签写1个key属性，属性值唯一
页面更新之后，会加速DOM的替换（渲染）
:key="变量"

数组更新与检测

可以检测到变动的数组操作：

push：最后位置添加
pop：最后位置删除
shift：第一个位置删除
unshift：第一个位置添加
splice：切片
sort：排序
reverse：反转

检测不到变动的数组操作：

filter()：过滤
concat()：追加另一个数组
slice()：
map()：

原因：

作者重写了相关方法（只重写了一部分方法，但是还有另一部分没有重写）

解决方法：

// 方法1：通过 索引值 更新数组（数据会更新，但是页面不会发生改变）
vm.arrayList[0]
"Alan"
vm.arrayList[0]='Darker'
"Darker"

// 方法2：通过 Vue.set(对象, index/key, value) 更新数组（数据会更新，页面也会发生改变）
Vue.set(vm.arrayList, 0, 'Darker')

vue

姓名	年龄	性别	国籍
{{info.name}}	{{info.age}}	{{info.gender}}	{{info.country}}