2024年Web前端最全【vue核心技术实战精讲】1(3)，2024年最新非科班面试之旅

最新推荐文章于 2024-07-10 13:45:25 发布

2301_82244509

最新推荐文章于 2024-07-10 13:45:25 发布

阅读量615

点赞数 3

分类专栏：程序员文章标签：前端面试学习

本文链接：https://blog.csdn.net/2301_82244509/article/details/138699724

版权

程序员专栏收录该内容

194 篇文章 3 订阅

订阅专栏

总结

对于框架原理只能说个大概，真的深入某一部分具体的代码和实现方式就只能写出一个框架，许多细节注意不到。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

算法方面还是很薄弱，好在面试官都很和蔼可亲，擅长发现人的美哈哈哈…（最好多刷一刷，不然影响你的工资和成功率???）
在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。
要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！

第一次跳槽十分忐忑不安，和没毕业的时候开始找工作是一样的感受，真的要相信自己，有条不紊的进行。如果有我能帮忙的地方欢迎随时找我，比如简历修改、内推、最起码，可以把烦心事说一说，人嘛都会有苦恼的～

祝大家都有美好的未来，拿下满意的 offer。

2、`总结`

v-model 双向的数据绑定

双向数据流（绑定）

页⾯面改变影响内存(js)
内存(js)改变影响⻚页⾯面

v-bind 和 v-model 的区别?

input v-model=“name”
- 双向数据绑定⻚页⾯面对于input的value改变，能影响内存中name变量量
- 内存js改变name的值，会影响⻚页⾯面重新渲染最新值
input :value=“name”
- 单向数据绑定内存改变影响⻚页⾯面改变
v-model: 其的改变影响其他 v-bind: 其的改变不不影响其他
v-bind就是对属性的简单赋值,当内存中值改变，还是会触发重新渲染

3-1、`实战` `<input>`

A、 `输入框 type="text"`

示例

<body>
    <div id='app'>
        <p>{{msg}}</p>
        <input type="text" v-model='msg'>
    </div>
    <script src="../vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                msg: 'input',
            }
        })
    </script>
</body>

效果

B、 `单选按钮 type="radio"`

示例

    <div id='app'>
        <!-- for="one" 表示绑定id='one'标签-->
        <div id="example-4">
            <label>单选按钮</label>
            <br>
            <input type="radio" id="one" value="One" v-model="picked">
            <label for="one">One</label>
            <br>
            <input type="radio" id="two" value="Two" v-model="picked">
            <label for="two">Two</label>
            <br>
            <span>Picked: {{ picked }}</span>
        </div>

    </div>
    <script src="../vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                msg: 'input',
                checked: true,
                picked: 'One',
                checkedNames: ['Jack','input']
            }
        })
    </script>

效果

C、 `复选框 type="checkbox" - 单个复选框，绑定布尔值`

示例

    <div id='app'>
        <!-- for="one" 表示绑定id='one'标签-->
        <div id="example-4">
            <label>单个复选框，绑定到布尔值：</label>
            <br>
            <input type="checkbox" id="checkbox" v-model="checked">
            <label for="checkbox">{{ checked }}</label>
        </div>

    </div>
    <script src="../vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                msg: 'input',
                checked: true,
                picked: 'One',
                checkedNames: ['Jack','input']
            }
        })
    </script>

效果

D、 `复选框 type="checkbox" - 多个复选框，绑定到数组`

示例

    <div id='app'>
        <!-- for="one" 表示绑定id='one'标签-->
        <div id="example-4">
            <label>多个复选框，绑定到同一个数组</label>
            <br>
            <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
            <label for="jack">Jack</label>
            
            <input type="checkbox" id="john" value="John" v-model="checkedNames">
            <label for="john">John</label>
            
            <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
            <label for="mike">Mike</label>
            <br>
            <span>Checked names: {{ checkedNames }}</span>
        </div>

    </div>
    <script src="../vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                msg: 'input',
                checked: true,
                picked: 'One',
                checkedNames: ['Jack','input']
            }
        })
    </script>

效果

3-2、`实战` `<select>`

示例 1：绑定数组

        <label>下拉框（选择框）</label>
        <br>
        <select v-model="selected">
            <option disabled value="">请选择</option>
            <option>A</option>
            <option>B</option>
            <option>C</option>
        </select>

        <span>Selected: {{ selected }}</span>
        <br>
        
    new Vue({
        el: '#app',
        data: {
            selected: 'D'
        }
    })

效果

示例 2：用 `v-for` 渲染的动态选项

<select v-model="selected">
  <option v-for="option in options" v-bind:value="option.value">
    {{ option.text }}
  </option>
</select>
<span>Selected: {{ selected }}</span>
        
new Vue({
  el: '...',
  data: {
    selected: 'A',
    options: [
      { text: 'One', value: 'A' },
      { text: 'Two', value: 'B' },
      { text: 'Three', value: 'C' }
    ]
  }
})