前端技术开发

 

//代码实现 棋盘效果

         // $("tr:odd>td:nth-child(even)").css("background-color", "#000");

         // $("tr:even>td:nth-child(odd)").css("background-color", "#000");

         $("tr:nth-child(odd)>td:nth-child(even)").css("background-color", "#000");

         $("tr:nth-child(even)>td:nth-child(odd)").css("background-color", "#000");

 

//代码实现 微博发布

      $("#fabu").click(function () {

        var txt = $("#con").val();

        var $lis = $("<li>" + txt + "</li>");

        $("#list").prepend($lis);

        $("#con").val("");

      });

    })

 

//代码实现 下拉框选择

      $("#btnAdd").click(function () {

        $("#selL>option:selected").appendTo("#selR");

      });

      $("#btnRe").click(function () {

        $("#selL").append($("#selR>option:selected"));

        // 或 $("#selR>option:selected").appendTo("#selL"); 

      });

 

$(function () {

         //代码实现 显示或隐藏菜单

         $("a").mouseenter(function () {

            $(this).next("ul").show();

         }).mouseleave(function () {

            $(this).next("ul").hide();

         })

      })

 

 //代码实现 选项卡

    $("div.menu ul li").click(function () {

      $(this).addClass("selected").siblings().removeClass("selected");

      var index = $(this).index();

      $("div.box>div").eq(index).show().siblings().hide();

    })

 

 

:fruitlist 

Myfruits 

item in fruitlist

item.state

:src

total

amount

:disabled

computed

props

Array

return t

return a

return flag

amount.value

 

 

shengfen

chengshi

jingdian

(item,index) in list

item.id

del(index)

ref,reactive

list.push(listitem)

splice

 

 

$("ul").prepend("<li>西瓜</li>");

$("li:eq(3)".after("<li>哈密瓜</li>");

$("li:lt(3):not(:first)").clone().appendTo("ul");

 

 

v-model

:enter

inputValue=''

(item,index) in list

remove(index)

list.length

vFocus

inputValue.value

1

list.length=0

 

 

@add

:list

todoList

reactive

6

nextld.value++

prevent

taskname

ref('')

'add'

emit

taskname.value

item.done

v-else

defineProps

 

                

1.请简述请简述Vue的特性。

 Vue的特性如下。

 1数据驱动视图

 在使用Vue的页面中，Vue会监听数据变化，当页面数据发生变化时，Vue会自动重新渲染页面结构。

 2双向数据绑定

 Vue实现了双向数据绑定，即当数据发生变化时，视图也会发生变化；当视图发生变化时，数据也会跟着同步变化。

 3指令

 指令主要包括内置指令和自定义指令，内置指令是Vue本身自带的指令，而自定义指令是由用户自己定义的指令。指令的名称以“v-”开头，作用于HTML中的元素。将指令绑定在元素上时，指令会给绑定的元素添加一些特殊的行为。

 4插件

 Vue支持插件，通过加载插件可以实现更多的功能。

 

2.请简述MVVM的组成部分及基本工作原理。

 MVVM主要包含Model（数据模型）、View（视图）和ViewModel（视图模型）。其中，Model是指数据部分，负责业务数据的处理；View是指视图部分，即用户界面，负责视图处理；ViewModel用于连接视图与数据模型，负责监听Model或者View的改变。

 

1.请简述常见的事件修饰符。

 在Vue中，经常会使用事件修饰符用于修饰事件，常见的事件修饰符有以下5种。

 1通过.prevent事件修饰符可以实现阻止默认事件行为的功能。

 2通过.stop事件修饰符可以实现阻止事件冒泡的功能。

 3通过.capture事件修饰符可以实现事件捕获的功能。

 4通过.once事件修饰符可以实现使事件只触发一次的功能。

 5通过.self事件修饰符可以实现只有DOM元素自身触发事件时才执行事件方法的功能。

 

2.请简述v-if和v-show指令的区别。

 在Vue中，条件渲染指令分为v-if和v-show两种。v-show与v-if都用来决定某一个元素是否在页面上显示出来。

 v-if是根据布尔值切换元素的显示或隐藏状态，本质是通过操作DOM元素来切换显示状态。当给定的值为true时，元素存在于DOM树中；当给定的值为false时，元素从DOM树中移除。

 v-show的原理是通过为元素添加或移除display: none样式来实现元素的显示或隐藏。

 当需要频繁切换某个元素的显示或隐藏时，使用v-show会更加节省性能上的开销；而当只需要切换一次显示或隐藏时，使用v-if更合理。

 

1.请简述组件之间数据共享的方式。

 在Vue中，实现组件之间数据共享的方式有以下3种。

 1通过props实现父组件向子组件中传递数据。

 2通过自定义事件实现子组件向父组件中传递数据。

 3通过依赖注入实现跨级组件之间的数据传递。

 

2.请简述解决组件之间样式冲突的方式。

 在Vue中，解决组件之间的样式冲突有以下2种方式。

 1scoped属性

 Vue为<style>标签提供了scoped属性用于解决组件之间的样式冲突，例如“<style scoped></style>”。

 2深度选择器

 深度选择器通过:deep()伪类来实现，在其小括号中可以定义用于子组件的选择器，例如，“:deep(.title)”。

 

1.请简述自定义指令的分类。

 Vue中的自定义指令分为两 类，分别是私有自定义指令和全局自定义指令。

 ●私有自定义指令是指在组件内部定义的指令。私有自定义指令可以在定义该指令的组件内部可以使用。例如，在组件A中自定义了指令，只能在组件A中使用，组件B、C中不能使用。

 ●全局自定义指令是指在全局定义的指令。全局自定义指令可以在全局进行使用，例如在main.js文件中定义了全局自定义指令，那么这个指令可以用于任何一个组件中。

 

2.请简述KeepAlive组件的作用。

 在Vue中，可以通过KeepAlive组件实现组件缓存，KeepAlive组件通过<KeepAlive>标签来定义，使用<KeepAlive>标签包裹需要被缓存的组件时，组件就不会销毁。

 

 

1.简述如何实现路由重定向。

 路由重定向可以使用户在访问一个URL地址时，强制跳转到另一个URL地址，从而展示特定的组件。通过路由匹配规则中的redirect属性可以指定一个新的路由地址，从而实现路由重定向。

 

2.请简述router.push()和router.go()的区别。

 （1）router.push()：push()方法会向历史记录中添加一个新的记录，以编程方式导航到一个新的URL，当用户单击浏览器后退按钮时，会回到之前的URL。

 （2）router.go()：go()方法用于实现前进或后退的效果，其参数表示历史记录中前进或后退的步数，类似于window.history.go()，相应的地址栏也会发生改变。例如，go(1)表示前进一条记录；go(-1)表示后退一条记录。