vue非组件的初学笔记

1.创建Vue实例，初始化渲染的核心

准备容器
引包
创建Vue实例new Vue()
- el用来指定控制的盒子
- data提供数据

2.插值表达式

作用利用表达式插值，将数据渲染到页面中
格式 {{表达式}}
注意点

表达式的数据要在data中存在
表达式是可计算结果的语句
插值表达式不能写在标签里面

3.Vue的相关指令

3.1 v-前缀的标签属性

v-html="表达式"设置当前标签元素的innerhtml
v-show="表达式"表达式的值为true时显示，false隐藏原理是display:none适用于频繁切换隐藏场景
v-if="表达式"表达式的值为true时显示为false时隐藏原理是创建或者移除元素节点适用于不频繁切换的场景
v-else=" "和v-else-if=" "辅助v-if进行判断渲染，需要紧挨着v-if一起使用
v-on可以简化为 @
- v-on:事件名="内联语句"
- v-on:事件名="method中的函数名"methods里面的函数形式 fn(){}
  如果不用传参直接写函数名就可以，如果要传参就括号然后里面写参数
v-bind可以简化为：
- :属性名="表达式"
- **操作class属性 **
  - ：class="{a:true或者fasle或者判断trueorfalse的语句}" 适用于一个类名来回切换比如tab导航栏
  - class="[类名1,类名2,类名2]"适用于批量删除或者添加类

html 复制代码

<div id="app">
        <ul>
            <li v-for="(item,index) in list" :key="item.id" @click="activeindex=index">
                <a :class={active:index==activeindex} herf="#">{{item.name}}</a>
            </li>
        </ul>
    </div>

v-for="(item,index) in 数组"适用于数据循环，多次渲染整个元素，主要针对数组，对象，数字
如果不用index可以 "item in 数组"

html 复制代码

<ul>
<li v-for="(item,index) in list">{{item}}-{{index}}
</li>
</ul>

案例- 列表渲染和删除功能

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="(item,index) in alist" :key="item.id">
                <span>{{ item.name }}</span>
                <span>{{ item.author }}</span>
                <button v-on:click="del(item.id)">删除</button>
            </li>
        </ul>
    </div>
    <script>
        const app=new Vue({
                el:'#app',
                data:{
                    alist:[
                        {id:1,name:'《红》',author:'曹'},
                        {id:2,name:'《绿》',author:'吴'},
                        {id:3,name:'《蓝》',author:'施'},
                    ]
                },
                methods:{
                    del(id){
                        this.alist=this.alist.filter(item =>item.id !== id)
                        }
                    }
                }
        )<!--methods写错了而且后面多加了逗号一直报错-->
        Vue.config.productionTip=false
    </script>
</body>
</html>

v-for里面key的作用：作为唯一标识
注意key的值只能是字符串或者数字类型，推荐使用id，因为需要具有唯一性

v-model重要，双向数据绑定既可以获取表单内容也可以设置表单元素的内容
- v-model="表达式" 表达式和data里面的变量**双向联动 **
  如果有login和reset直接调用this.变量=''这样就可以reset了
  - 如果是表单输入框的话获取的就是输入的内容一般为字符，但是可以配合.trim和.number使用
  - 单选框获取的是true or false
  - 多选按钮获取的是选择项的value值一般会有value和name属性name用来同组相斥
  - 复选框写在selection里获取的是option的value值option一般有value值
  - 文本域获取的是文本值

案例- 列表的添加删除统计清空

html 复制代码

<section id="app">
    <!-- 输入框 -->
    <header class="header">
      <h1>小黑记事本</h1>
      <input  placeholder="请输入任务" class="new-todo" v-model="todoname"/>
      <button class="add" @click="add">添加任务</button>
    </header>
    <!-- 列表区域 -->
    <section class="main">
      <ul class="todo-list">
        <li class="todo" v-for="(item, index) in list" :key="item.id">
          <div class="view">
            <span class="index">{{ index + 1 }}.</span> <label>{{ item.name }}</label>
            <button @click="del(item.id)" class="destroy"></button>
          </div>
        </li>
      </ul>
    </section>
    <!-- 统计和清空 -->
    <footer class="footer" v-show="list.length>0">
        <!-- 统计 -->
        <span class="todo-count">合 计:<strong> {{list.length}}</strong></span>
        <!-- 清空 -->
        <button class="clear-completed" @click="clear">
          清空任务
        </button>
      </footer> 
  </section>
  
  <!-- 底部 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        todoname:'',
        list: [
          { id: 1, name: '跑步一公里' },
          { id: 3, name: '游泳100米' }
        ]
      },
      methods: {
        del (id) {
          // console.log(id) => filter 保留所有不等于该 id 的项
          this.list = this.list.filter(item => item.id !== id)
        },
        add(){
            if(this.todoname.trim()==''){
                alert("请输入值")
                return
            }
            this.list.unshift({
                id:+new Date(),
                name:this.todoname,
            })
        },
        clear(){
            this.list=[]
        }
      }
    })
  
  </script>

总结

一次添加多个内容-属性添加法

html 复制代码

{
属性名：属性值，
属性名：属性值<!--最后一个可以不加逗号-->
<!--new Vue({})这里也是这么个意思-->
}

数组的方法积累

html 复制代码

.filter(item=>item.id!=id) <!--这样完了之后一定要赋值原数组回去-->
.unshift()<!--如果里面有多个属性就是{}这个-->
.reduce((sum,index)=>>sum+item.score,0)<!--数组里某一项求值-->

字符串的方法积累

html 复制代码

.trim()
<!--应用：1.可以用来去除前后的空格后判断是不是空字符串-->

时间戳的应用

html 复制代码

+new Date()

我的错误和思维漏洞

在data里面相互引用的时候不加this
清空操作字符串就赋值''数组就就赋值[ ]
如果想实时动态改变值：就用@事件="数值改变的表达式或者函数调用"
表达式可计算的特性很重要，插值表达式不放在标签里面，其他就不用考虑了
params：里面的默认写法是属性名：属性值（后端规定）但是如果穿的是多个属性组成的对象，直接params：对象就可以

3.2 指令修饰符

@keyup.enter=""键盘事件监听绑定回车键
v-model.trim=""双向互动绑定去除首尾空格
v-model.number=""双向互动绑定字转数字
@事件名.stop =""阻止冒泡
@事件名.prevent =""*阻止默认行为 *例如a标签的跳转

4.Vue里面的各种属性

methods里面的函数形式 fn(){}

用途：发请求，事件触发

在v-on=""如果不用传参直接写函数名就可以，如果要传参就括号然后里面写参数
如果在vue的其他地方和插值表达式里面要用的话还是要加括号

computed里面的属性形式 f'n(){}

和用data里面的其他值一样用这个f'n也就是当为属性在用,所以不管是vue的其他地方还是插值表达式都是f'n
缓存特性以提升性能
计算属性得出来的值是默认不能修改的，在任何地方修改都会报错，只有加上set方法之后才可以修改

html 复制代码

computed:{
计算属性名字：{
	get(){
		return 
	},
	set(修改的值value）{
	}
	//当在外部有修改计算属性的行为的时候，就会触发这个set方法，并把修改的值赋值给value,然后可以对value进行相关的操作。
}

但是注意要用computed里面的某个属性里的修改的话就应该是属性='修改值'(vue里面其他地方用还是要加this哦)

watch监视器

如果你写了某个数据的监视器，只要数据变化了，就会触发这个对应监视器

作用：可以根据数据的实时变化，来发送请求

little tips：用clearTimeout(a) const a=setTimeout()来实现防抖延迟执行 .

非整个对象的写法

整个对象的监听写法

deep是深度监视就是对对象里面每一个属性都监视，immmediate是一进页面就翻译一次。

5.生命周期

konwlegde

生命周期钩子：在vue的生命周期里自动运行的函数，可以在这些函数里面运行自己的代码。
created：发初始化请求
mounted：dom操作

destroy是在关闭页面后执行的，可以用app.$destroy()将数据变成死数据

example-自动获取焦点

6.工程化开发

index.html提供vue所管理的容器
App.vue是根目录
components是子组件
main.js导入vue,App.vue,用render方法将App.vue动态渲染到 index.html