Vue 基础 1

基础概念

1 渐进式框架 (适用于可大可小的项目) 
2 优点 -- 运行效率高 (虚拟DOM, 减少dom操作)   
3 优势 -- 开发效率高, 生态比较完善 (组件化开发) 
4 特点 -- 将开发者的精力从操作dom解放出来, 主要关注数据的变化 
5 使用 -- 引入或下载Vue框架 
          
6 组件化的好处: 便于维护 + 可复用

Vue实例配置项

1 常见配置项
-------------------------------------------------------------------------------------
	el: "#hh",     关联指定元素 -- 只能用于根组件
	data: {
    
    ..},    存放该实例数据
	methods: {
    
    ..},      定义实例方法的配置项
    computed: {
    
    ..},    计算属性 -- 调用的时候不需要加小括号
    components: {
    
    }     注册局部组件
    filters: {
    
    ..}      过滤器 -- 用来格式化文本数据的
    watch: {
    
    }     数据监听器
    钩子函数等等...
-------------------------------------------------------------------------------------

2 配置项说明
-------------------------------------------------------------------------------------
1 过滤器
	{
    
    {
    
    message | hh("棒棒糖")}}     //过滤器只能用于双大括号中, 或 v-bind俩个地方
	
	局部使用 -> 第一个参数 == 要过滤的数据;  第二个参数 == 过滤器后面传入的实参
	filters: {
    
    hh(mes, V) {
    
    return mes + "我喜欢你"}}      
	
    全局使用 -> 过滤器返回的值就是, 过滤器格式化之后的文本
    Vue.filter('hh', function(mes, V) {
    
     return mes + "是个大憨憨"})     


2 计算属性   //我们有时候需要去展示数据计算之后的一个结果
	<p> CAN  {
    
    {
    
    a1 + a2}} </p>   //若涉及复杂的计算逻辑, 不适合在这里计算
	<p> CAN  {
    
    {
    
    hh}} </p>     //代码整洁, 便于阅读
	data: {
    
     a1: 500, a2: 20 },       
	computed: {
    
    hh () {
    
     return this.a1 + this.a2 }}


3 computed 和 methods 的区别
	computed   第一次调用会缓存数据, 多次调用只执行一次, 发现数据变化也会动态同步;  优势效率高
	methods     每次调用, 都会执行一次函数内部的代码    


4 监听器
	1 作用 -- 主要用于监听 -- 声明式变量 -- 计算属性 -- 路由的变化
	
	2 监听普通数据的变化  (Vue实例配置项) 
		data: {
    
     num: 6 }
		watch: {
    
    num: function(news, old) {
    
     ..}}     
		//num变化触发, 默认参数: (news==修改后的值, old==修改前的值)
		
	3 监听对象数据的变化
		data: {
    
    obj: {
    
    str: "CAN"}} 
		watch: {
    
    obj: function(new, old) {
    
     ..}}   //正常情况, 只有obj的地址发生变化的时候才会触发
		watch: {
    
    'obj.str': function() {
    
    }}   //监听对象的某一个属性值, 这样很有局限性, 不能监听其他属性了
		watch: {
    
    obj: {
    
     handler: function(news, old){
    
    }}, deep: true, immediate: true}     //深度监听; 
        //immediate: true 代表创建 Vue实例时马上执行一次 handler函数
        
	4 项目启动时候, 不需要监听, 触发某个事件之后监听
		点击触发事件 <button @click="ck1"></button>
		methods: {
    
    ck1(){
    
     this.$watch('num', function(news, old){
    
    } ) } }
		methods: {
    
    ck1(){
    
     this.$watch('num', function(news, old){
    
    }, {
    
    deep: true, })}}   
		//对象深度监听的写法

入门指令

1 指令说明
	1 说白了就是标签的自定义属性
	2 指令后面的值可以是变量或表达式
	

2 插值操作
	1 展示 data变量或表达式 -- <p>{
    
    {
    
     message }}</p>  -- 常用
	2 更新元素的 innerHTML -- <p v-html="a1"></p>  -- 常用
	3 更新元素的 innerText  -- <p v-text="message"> </p>    -- 不常用
	4 只会第一次取到数据区渲染,渲染完就不管了 -- <h2 v-once> {
    
    {
    
     message }} </h2>  -- 不常用
	5 让改标签不识别 Mustache 语法, 直接按照原有格式显示 -- <h2 v-pre> {
    
    {
    
     message }} </h2>-- 不常用
	6 解决 {
    
    {
    
    msg}} 数据加载慢出现闪动的情况 -- <div id="app" v-cloak>  {
    
    {
    
     message }}  </div>-- 不常用
	7 解决闪动 -- <style> [v-cloak] {
    
     display: none} </style>
	

3 绑定属性 (v-bind -> :)
	1 <img :src="imgURL" alt="">      可以通过data数据结合表达式控制属性值
	2 <h2 :style="{color: xx1, height: '100px'}">  </h2>     动态绑定样式
	3 <h2 class="hh" :class="{b1:b1x, b2:b2x}"> </h2>  对象语法--绑定类名 b1 + b2;  可和原来的类名共存
	4 <h2 :class="getClass()">  </h2>        优化写法 == 通过函数 return 一个对象
	5 <h2 :class="[b1, b2]">  </h2>      数组语法 == 添加多个类名 -- 不常用
	6 <h2 :style="[x2, x3]">  </h2>    动态绑定样式--数组语法--不常用   x2: "color: red"
	

4 事件监听  (v-on: -> @)
	1 没有参数或者只需要事件对象, 可以省略小括号 -- 多个参数 $event 实参代表事件对象
	2 例子
		1 <p @click="fn"></p>   省略括号
		2 <p @click="fn(v, i)"></p>   传参
		3 <p @click.prevent="fn"></p>   修饰符
	3 事件修饰符
		1 prevent  阻止默认行为事件
        2 stop 阻止事件传播 (冒泡)
        3 enter    监听是哪个键盘按键点击的, @keyup.enter==监听回车 / @keyup.13 
        4 native   监听组件根元素的原生事件
        5 once     只触发一次回调, 就是只执行第一次事件函数; 例一个按钮只能点击一次
        6 capture  设置事件流为捕获
        7 self   事件必须发生在自己身上才会执行 -- 事件流触发不了这个
        8 .ctrl和.shift是功能键盘,注意参考文档去使用


5 显示隐藏元素
	1 v-if   后面的值为 true 的时候渲染元素;false的时候删除元素  (适用于切换次数少的)
    2 v-else  跟在v-if 后面的, 不显示 v-if 的时候显示它
    3 v-show  后面的值为 true 的时候显示元素;false的时候隐藏元素  (display: none;)

6 循环遍历
	1 概括
		1 可以遍历对象
        2 :key="i" 确保唯一性
	2 代码
        1 <li v-for="v in arr1"> {
    
    {
    
    v}} </li>
        2 <li v-for="(v, i) in arr1" :key="i"> {
    
    {
    
    v}} </li>
	3 注意 -- 除了以下方法 -- 其他方式修改数组 -- 不会动态更新页面展示的数据
      push() / pop() / shift() / unshift() / splice() / sort() /
      reverse() / Vue.set() / 直接赋值一个新的数组

7 数据双向绑定
	1 作用 -- 让表单值和组件数据动态同步的
    2 code -- <input type="text" v-model.trim.lazy="msg">     可用多个修饰符
    3 表单修饰符
        1 .trim   用于去除掉表单值首尾空字符串
        2 .number   用于把字符串转化成Number类型
        3 .lazy   是一个性能优化的小技巧,当表单失焦时才同步更新声明式变量
    4 单选框 -- 
        1 绑一样的 v-model 就把这俩个关联起来了 -- sex就是用户取的值 -- 记得加value属性 -- 默认sex==1
        2 <input type="radio" value="1" v-model='sex'>
        3 <input type="radio" value="2" v-model='sex'>
    5 多选框
        1 也是绑定相同的 v-model + 唯一的 value值  (点勾了 fav数组就存在该项, 不点了就没有 -- 记住定义fav空数组偶)
        2 工作中多选按钮也是通过又一个数组渲染出来的

8 自定义指令
    自定义全局指令   //可以在所有实例中使用
        Vue.directive(  'hh', {
    
     inserted: function(e) {
    
     功能实现} } )    
        //e==指令绑定的原生DOM元素对象 / 指令名 hh, 使用 v-hh 
    自定义局部指令   //只有该定义的实例可以使用, 实例配置项定义
        directives: {
    
      hh: {
    
     inserted: function(e) {
    
     功能实现} } }  

猜你喜欢

转载自blog.csdn.net/weixin_46178697/article/details/113954543

相关文章