【学习笔记】前端（I）—— Vue2（Ⅱ）

Vue2（Ⅱ）

• 3、基础篇
• •       3.8、样式绑定
  • •             3.8.1 class
    •             3.8.2 style
  •       3.9、列表渲染
  • •             3.9.1 列表过滤
    •             3.9.2 列表排序
    •             3.9.3 列表更新
  •       3.10、数据劫持
  •       3.11、收集表单数据
  •       3.12、过滤器 filters
  •       3.13、自定义指令
  •       3.14、模板 template
  •       3.15、生命周期
  •       3.16、组件
  • •             3.9.1 非单文件组件
    •             3.9.2 重要的内置关系
    •             3.9.3 单文件组件

3、基础篇

      3.8、样式绑定

            3.8.1 class

        绑定class样式要使用’ :class=“xxx” ‘的写法，其不影响’ class=“xxx” '的使用，也就是两者可以共存

               Title                     .basic {                 width: 400px;            height: 100px;            border: 1px solid black;         }         .happy {                 border: 4px solid red;            background-color: rgba(255, 255, 0, 0.644);            background: linear-gradient(30deg, yellow, pink, orange, yellow);         }         .sad {                 border: 4px dashed rgb(2, 197, 2);            background-color: gray;         }         .normal {                 background-color: skyblue;         }         .hyh1 {                 background-color: yellowgreen;         }         .hyh2 {                 font-size: 30px;            text-shadow: 2px 2px 10px red;         }         .hyh3 {                 border-radius: 20px;         }                                          {  { name }}         
{  { name }}         
{  { name }}                     new Vue({                 el: '#root',            data: {                    name: 'test',               mood: null,               classArr: ['hyh1', 'hyh2', 'hyh3'],               classObj: {                       hyh1: false,                  hyh2: true,                  hyh3:false               }            },            methods: {                    changeMood() {                       const moodsArr = ['normal', 'happy', 'sad']                  const random = Math.floor(Math.random() * moodsArr.length)                  this.mood = moodsArr[random]               }            }         })         

            3.8.2 style

        绑定style样式要使用’ :style=“xxx” ‘的写法，其不影响’ style=“xxx” '的使用，也就是两者可以共存

               Title                     .basic {                 width: 400px;            height: 100px;            border: 1px solid black;         }                                          {  { name }}         
{  { name }}         
{  { name }}                     new Vue({                 el: '#root',            data: {                    name: 'test',               styleObj: {                       fontSize: '40px',                  color: 'red'               },               styleObj2: {                       background: 'green'               },               styleArr: [{      color: 'orange' }, {      background: 'grey' }]            }         })         

      3.9、列表渲染

            3.9.1 列表过滤

筛选：arr.filter((每个元素)=>{被筛选的元素条件})

   
computed实现列表过滤
      
{  { p.name }} - {  { p.age }} - {  { p.sex }}
   
   
watch实现列表过滤
      
{  { p.name }} - {  { p.age }} - {  { p.sex }}
   
   //computed实现   new Vue({           el: '#root1',      data: {              keyword: '',         persons: [            {      id: '001', name: '周冬雨', age: 20, sex: '女' },            {      id: '002', name: '马冬梅', age: 19, sex: '女' },            {      id: '003', name: '周杰伦', age: 21, sex: '男' },            {      id: '004', name: '温兆伦', age: 22, sex: '男' }         ]      },      computed: {              filPersons() {                 return this.persons.filter(               (p) => p.name.indexOf(this.keyword) !== -1            )         }      }   })   //watch实现   new Vue({           el: '#root2',      data: {              keyword: '',         persons: [            {      id: '001', name: '周冬雨', age: 20, sex: '女' },            {      id: '002', name: '马冬梅', age: 19, sex: '女' },            {      id: '003', name: '周杰伦', age: 21, sex: '男' },            {      id: '004', name: '温兆伦', age: 22, sex: '男' }         ],         filPersons: []      },      watch: {              keyword: {                 immediate: true,            handler(newV) {                    //初始时newV是''               this.filPersons = this.persons.filter(                  (p) => p.name.indexOf(newV) !== -1               )            }         }      }