记录vue学习的笔记

Vue框架的基础模板

---

• 导入vue模板

• 创建vue的实例对象

• el属性是固定的写法，表示当前的vm实例要控制页面上的那个区域，接受的值是一个选择器

• data对象就是要渲染到页面上的数据

const vm = new Vue({

el:控制对象,

data: {}

})

Vue的指令

---

1.内容渲染指令

1. v-text

• v-text缺点是覆盖文本内容默认值

2. { { }}（常用）

• 插值表达式（Mustache），解决文本内容被覆盖问题

3. v-html

• 可以把带标签的字符串，渲染成真正的html内容！

2.属性绑定指令(常用)

注意：插值表达式只能用在元素的内容节点中，不能用于属性节点

• v-bind: 可以简写成 :，经常使用，作用是为元素的属性动态绑定值

• 在使用v-bind属性绑定期间，如果绑定内容需要进行动态拼接，则字符串需要用单引号包裹，例如：

<div:title="'box'+index">这是一个盒子</div>

3.事件绑定

• v-on:

• v-on: 可以用@代替，处理函数可以用add(n)进行传参

• 原生dom对象onclick,oninput,onkeyup等转变成 @click、@input、@keyup等

4.事件对象

• vue中提供了一个原生dom的变量名称$event,

• <button v-on:click="add(2, $event)">+n</button>

• add (n, e) {
  // vm === this
  // console.log(vm === this); true
  this.count += n;
  console.log(e);
  if(n % 2 === 0){
  // e.target指向当前的+n button
  e.target.style.backgroundColor = 'red';
  }
  },

5.事件修饰符

• 在vue里面，提供了事件修饰符，就是在绑定事件后面添加修饰符

• e.preventDefault(); 变成 .prevent

• <divid="app">
  <ahref="www.baidu.com"@click.prevent="show">跳转百度页面</a>
  </div>
  <script>
  const vm = new Vue({
  el: '#app',
  data: {
  },
  methods: {
  show (e) {
  //e.preventDefault();// 原生态dom写法
  console.log('点击a标签了');
  }
  }
  })
  </script>

• e.stopPropagation(); 变成 .stop

6.按键修饰符

• @keyup. 方法，判断详细的按键，可以为键盘相关的事件添加按键修饰符

• <!-- 当按下键盘esc时，清空输入内容 vm.clearInput() -->
  <!-- 当按下键盘enter时，执行发送请求 vm.submit -->
  <inputtype="text"@keyup.enter="submit"@keyup.esc="clearInput">
  
  // script模块内容
  const vm = new Vue({
  // el属性是固定的写法，表示当前的vm实例要控制页面上的那个区域，接受的值是一个选择器
  el: '#app',
  // data对象就是要渲染到页面上的数据
  data: {
  },
  methods:{
  clearInput(e){
  console.log(e);
  e.target.value = '';
  },
  submit(e){
  console.log('发送Ajax请求');
  }
  }
  })

7.双向绑定

1. v-model指令

• vue提供了v-model双向数据绑定指令，用来辅助开发者在不操作dom的前提下快速获取表单的数据

• 所有的表单数据类型都可以使用v-model，常见的有以下几个：

1. input输入框

• type="radio"

• type="checkbox"

• type="text"

• ...

2. textarea

3. select

2. v-model指令的修饰符

• 为了方便用户输入的内容进行处理，vue为v-model指令提供了三个修饰符，分别是：

1. .number 自动将用户的输入值转为数值类型

2. .trim 自动过滤用户输入的首位空白字符

3. .lazy 在“change”时而非“input”时更新（可以理解为当用户停止输入，值输入完毕之后）

8.条件渲染指令

1. v-if

• 原理：动态为元素添加或移除display:none样式，来实现元素的显示和隐藏

2. v-show

• 原理：每次动态创建或移除元素，实现元素的显示和隐藏

3. 两者同异

• 同：都能实现页面的元素隐藏和显示，使用true or false进行控制

• 异：刚进页面时，某些元素默认不需要被展示，而且后期也可能不需要被展示出来，使用v-if性能会更好；如果要频繁切换元素的显示状态，用v-show性能会更好

4. v-else-if

• 与v-if配套使用（比较少用到，除了要处理复杂选项）

5. v-else

• 与v-if配套使用，不需要进行判断直接写

9.列表渲染指令v-for

1. v-for

• 基于一个数组来循环渲染一个列表结构

• 需要使用 item in items 形式的特殊语法，items是待循环的数组，item是被循环的每一项

• <!-- 注意 item in list 里面 item不一定叫item可以是其他的名字，list是data里面数组的名字（所以要根据数组名字变化） -->
  <!-- （item，index） in list 可以动态生成索引号（index），注意index也可以叫其他的名字 -->
  <!-- 使用v-for的时候加上:key="item.id" 保证数据的唯一性 -->
  <trv-for="(item,index) in list":key="item.id">
  <td>{ { index }}</td>
  <td>{ { item.id }}</td>
  <td>{ { item.name }}</td>
  </tr>
  
  data:{
  list:[
  { id: 1, name: '张三'},
  { id: 2, name: '李四'},
  ]
  },

• 使用v-for的时候，一定要在后面加上key属性，最好使用数组其中的id作为key

• key的值只能是字符串或数字类型

• 使用idex的值当作key的值没有任何意义，index的值不具有唯一性

过滤器filters（vue3.0已经剔除）

---

1.私有过滤器

1. { { 需要过滤的值 | 过滤器名称(返回的是过滤器中的值) }}

2. //等待渲染的地方
   <p>{ { message | capitalize }}</p>

// 过滤器和el,data同级

filters:{

/* 过滤器的注意点

1.过滤器必须要有return值，{ {}}里面渲染的是capitalize的返回值

2.过滤器的参数val

3.过滤器本质是函数

*/

// capitalize: function(){}等价于下面

capitalize(val){

const first = val.charAt(0).toUpperCase();

const other = val.slice(1);

return first+other;

}

2.全局过滤器

1. 全局过滤器是使用Vue.filter,没有s

2. 使用的格式是

• Vue.filter('过滤器的名字',function(val){ return ... })

3.过滤器的注意点:

• 要定义到filters节点，本质是一个函数

• 在过滤器的形参中，一定要有return值

• 在过滤器的形参，就可以获取到 “ 管道符| ”前面待处理的那个值

• 如果全局过滤器和私有过滤器名字一致,此时按照"就近原则",调用的是"私有过滤器"

监听器watch( 异步函数的一种解决方案，异步操作等)

---

1.监听器的本质是一个函数,方法格式的监听器

• 缺点1：无法在进入的时候自动触发

• 缺点2：无法监听属性的变化

• 想要使用方法监听器 监听对象的子属性变化，需要使用单引号 ‘info.username’ 进行命名函数

• watch:{
  // 监听器的本质是一个函数
  // 新值在前 旧值在后
  username(newVal, oldVal){
  $.get('