网站建设如何敲图标代码,怎么学会建自己网站的方法,上海高端品牌网站建设专家,万网 网站一、ref#xff08;打标识#xff09; 前面提及到了标签属性#xff1a;keys 这里将了解ref#xff1a;打标识 正常布置脚手架并创建入口文件main.js,引入组件 1. 可以给元素注册引用信息#xff08;获取真实DOM#xff09; 给一个按钮获取上方的dom的方法#xff0c;方…一、ref打标识 前面提及到了标签属性keys 这里将了解ref打标识 正常布置脚手架并创建入口文件main.js,引入组件 1. 可以给元素注册引用信息获取真实DOM 给一个按钮获取上方的dom的方法方法中使用什么进行获取dom元素 是使用获取id方法给标签设置id直接操作dom 错误❌ 既然原生js可以给dom添加id那么Vue也有类似的标识方法ref 获取打了标识的domvc上面的$refs //通过ref进行设置标识title
h1 v-textmsg reftitle/h1
button clickshowDOM点我输出上方的dom元素/button
//通过vc下的refs进行获取通过ref标识的dom
console.log(this.$refs.title);//真实DOM 2. 给子组件注册引用注册信息获取组件实例对象 注意可以直接在子组件上通过ref标识然后也可以通过当前vc的$refs进行获取到子组件实例对象 methods: {showDOM () {console.log(this);//获取当前的组件vcconsole.log(this.$refs.title);//真实DOMconsole.log(this.$refs.btn);//真实DOMconsole.log(this.$refs.school);//vcschool组件的实例对象}}, 二、配置项props 接收数据配置项 若想实现使用三次组件相同但是获取到的数据不同就需要引入新的配置项 那么被复用能获取不同数据的组件就不能直接放代理的数据 父组件中组件标签调用组件传入数据 Student name李四 sex女 :age18/ 子组件本身接收数据(props:接收)存在三种接收数据方式 props:[ name,age,sex] 名字必须对上但顺序无所谓 如果想要接受的数据时处理后的数据就出现问题因为直接传入的数据是字符串数据想要直接使用数据传入模板就无法解析就会报错 解决可以对模板中数据前置转换age*11 解决在发送数据的部分数据名前面进行绑定 :age 因为v-bind绑定数据引号里是运行表达式返回结果所以会直接变成数值数据 props:{ name:String, age:Number, sex:String, } 获取到的数分别是字符串、数值、字符串 接收同时对数据限制默认值指定必要性限制 props: {name: {type: String,//类型required: true,//名字必须得传},age: {type: Number,default: 99,//如果不传年龄直接99},sex: {type: String,required: true,}} 设置传递数据 type传递属性 required数据必须传递 default不传数据就会直接返回值默认值 传递进去通过浏览器展示之后不可以更改 h2学生年龄{{age1}}/h2
button clickchange尝试修改外部传进来年龄信息/button
//vue
props:[ name,age,sex]//简单声名接收
//数据发生变化的方法methods: {change () {this.age}},//此时会报错因为传入的数据不能发生变化 解决修改传入数据 传递之后的数据优先级比自身设置的data数据优先级高 这时候传递进来的数据赋值给data中如果自己命名数据 可以将标签中读取的数据从获取数据名字转为自己data设置的数据名字 h2学生年龄{{myAge1}}/h2button clickchange尝试修改外部传进来年龄信息/button
//vuedata () {return {msg: 我爱学习,// name:张武 //数据以外部传进来为主myAge: this.age}},
props:[ name,age,sex]//简单声名接收
methods: {change () {this.myAge}}, 传入数据的名字不应该使用标签属性例如key、ref 三、mixin混入 两个组件共享相同配置 1. 局部混入 1. 创建混入mixin.js文件使用分别暴露 export const mixin {methods: {showName() {alert(this.name)}}, 2.引入混合直接在使用的组件部分引入分别暴露使用花括号形式引入 根据混入文件中暴露部分名字 import {mixin} from ./mixin 3. 使用混合新的配置项mixins 必须写成数组形式写在组件中 mixins:[mixin] 注意 组件配置内容比混入优先级高 生命周期钩子不以组件或者混合为主都会执行混合钩子靠前使用 2. 全局混入 不在组件中引入混入而是在main.js文件中引入 在main中引入的暴露配置 然后再main中是使用apiVu.mixin(name)使用混入 在main.js中引入并使用mixin中配置之后就会应用在全局每一个vcvm都会应用到 四、插件增强Vue可以接收参数 本质对象必须包含install第一个参数是vue的构造函数 1.直接在src中编写plugins.js export default{install() {console.log(install);
} 2. 在main.js中引入 // 引入插件
import plugin from ./plugins 3. 在main.js中使用插件 Vue.use(plugins) 使用use的时候传入一个参数输出的是vue的构造函数 export default{install(Vue) {console.log(Vue);
} 使用use时候传入多个参数插件都可以接收到 //main.js
Vue.use(pluginsz,1,2,3)
//plugins
export default{install(Vue, x, y,z) {console.log(x,y,z);
} 直接在插件中配置多个配置项添加参数 配置plugs插件main文件中引入使用apiVue.use(插件名字) export default{install(Vue, x, y) {console.log(x,y);// 全局过滤器Vue.filter(mySilice, function (value) {return value.slice(0, 4);});// 全局自定义指令(获取焦点)配合新生成的实例Vue.directive(fbind, {bind(element, binding) {element.value binding.value;},// 插入页面时候调用inserted(element, binding) {element.focus();},// 指令所在模板重新解析时候update(element, binding) {element.value binding.value;},});//定义混入Vue.mixin({data() {return {x: 1000,y:2000}}})// 给Vue原型上添加一个方法vm和vc都可以使用Vue.prototype.hello ()(alert(hello))}
} 注意可以使用很多插件并通过use使用插件 五、scropedlang组件样式属性
1.scroped 子组件中的样式最终都会汇总 到一块类名冲突谁后在app中引入顺序就决定使用哪个组件中的样式 //app组件中使用后引入的决定组件样式
import School from ./components/School
import Student from ./components/Student; //school组件中
.demo {background-color: orange;
}
//student组件中
.demo {background-color: pink;
} 解决scroped作用域只在当前组件生效 给外侧组件div生成特殊的标签属性 app组件不适用app组件的样式是所有很多组件都会使用 style scroped
.demo {background-color: orange;
}
/style 2. lang 可以使用css编译或者less预编译但是脚手架无法处理less 解决需要安装less-loader less-loader最新版本应该匹配webpack的最新版本 style langcss
.demo {background-color: orange;
}
/style
style langless
.demo {background-color: blue;.qwe {font-size: 80px;}
}
/style 解决less-loader版本和webpack版本的差异 查看webpack版本和less-loader版本应该匹配 npm view webpack version
npm view less-loader versionwebpack4匹配的是less-loader7webpack5匹配的 是less-loader8、9
