【资料图】
【相关推荐:javascript视频教程、web前端】
一、函数式编程
1、函数式编程简介
函数式编程是种编程方式,它将电脑运算视为函数的计算。函数编程语言最重要的基础是λ演算(lambda calculus),而且λ演算的函数可以接受函数当作输入(参数)和输出(返回值)。
和指令式编程相比,函数式编程强调函数的计算比指令的执行重要。
和过程化编程相比,函数式编程里函数的计算可随时调用。
filter函数自动过滤对象的所有元素,返回true才会存入指定对象;
Reduce函数对数组内部的所有元素进行汇总;
2、代码实例
Title {{totalPrice()}}<script src="../js/vue.js"></script><script> const app = new Vue({ el: "#app", data: { message: "你好" }, methods :{ totalPrice(){ const nums = [10,9,21,16,7] let total = nums.filter(x => x<10).map(x => x*2).reduce((pre,n)=>pre+n); console.log(total) return total } } })</script>
二、v-model
vue中经常使用到和
1、v-model双向绑定
v-model动态双向绑定实现原理,本质上包含两个操作:
(1)v-bind绑定一个value属性
(2)v-on指令给当前元素绑定input事件
Title {{message}}<script src="../js/vue.js"></script><script> const app = new Vue({ el: "#app", data: { message: "哪吒" }, methods: { valueChange(event){ this.message = event.target.value; } } })</script>
2、v-model和radio结合使用
Title <script src="../js/vue.js"></script><script> const app = new Vue({ el: "#app", data: { message: "你好", sex: "女" } })</script>您选择的是:{{sex}}
3、v-model和CheckBox单选框结合使用
Title <script src="../js/vue.js"></script><script> const app = new Vue({ el: "#app", data: { message: "你好", isAgree: false } })</script>您选择的是:{{isAgree}}
4、v-model和CheckBox多选框结合使用
Title 比比东 千仞雪 美杜莎 云韵 雅妃<script src="../js/vue.js"></script><script> const app = new Vue({ el: "#app", data: { message: "你好", girls: [] } })</script>您选择的是:{{girls}}
5、v-model结合select使用
Title <script src="../js/vue.js"></script><script> const app = new Vue({ el: "#app", data: { message: "你好", girl: "云韵" } })</script>您的选择是:{{girl}}
6、v-for值绑定
Title <script src="../js/vue.js"></script><script> const app = new Vue({ el: "#app", data: { message: "你好", girls: [],//多选框 beautyGirls: ["云韵","比比东","雅妃","纳兰嫣然","美杜莎"] } })</script>您的选择是:{{girls}}
7、v-model修饰符的使用
Title <script src="../js/vue.js"></script><script> const app = new Vue({ el: "#app", data: { message: "哪吒", age: 0, name: "哪吒" } })</script>{{message}}
{{age}} --> {{typeof age}}
{{name}}
三、组件化开发
组件是Vue.js中重要思想
它提供了一种抽象, 我们可以开发出一个独立可复用的小组件来构造我们的应用组件可以扩展 HTML 元素,封装可重用的代码组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的界面都可以抽象为一个组件树组件化思想应用
有了组件化的思想, 我们之后开发中就要充分的利用它尽可能将页面拆分成一个个小的, 可复用的组件这样让我们代码更方便组织和管理, 并且扩展性也强1、全局组件
Title <script src="../js/vue.js"></script><script> //1.创建组件化构造器对象 const cpnC = Vue.extend({ template: `` }) //2.注册组件 Vue.component("my-cpn",cpnC) const app = new Vue({ el: "#app", data: { message: "你好" } })</script>我是标题
我是CSDN哪吒
2、局部组件
Title <script src="../js/vue.js"></script><script> //1.创建组件化构造器对象 const cpnC = Vue.extend({ template: `` }) const app = new Vue({ el: "#app", data: { message: "你好" }, components: { cpn: cpnC } })</script>我是标题
我是CSDN哪吒
3、父子组件
Title <script src="../js/vue.js"></script><script> //1.创建组件化构造器对象 const cpnC1 = Vue.extend({ template: `` }) const cpnC2 = Vue.extend({ template: `我是标题1
我是CSDN哪吒
`, components: { cpn1: cpnC1 } }) const app = new Vue({ el: "#app", data: { message: "你好" }, components: { cpn2: cpnC2 } })</script>我是标题2
我是博客专家
4、组件化语法糖写法
vue为了简化注册组件的过程,提供了语法糖的写法,主要是省去了调用Vue.extend()的步骤,直接使用一个对象替代。
Title <script src="../js/vue.js"></script><script> //注册组件语法糖写法 Vue.component("my-cpn",{ template: `` }) const app = new Vue({ el: "#app", data: { message: "你好" } })</script>我是标题
我是CSDN哪吒
5、组件模板抽离写法
Title <script src="../js/vue.js"></script><script> // 1.注册一个全局组件 Vue.component("cpn", { template: "#cpn" }) const app = new Vue({ el: "#app", data: { message: "你好啊" } })</script>我是标题
我是CSDN哪吒
四、组件可以访问Vue实例数据吗?
1、简介
实验发现,组件不能访问Vue实例数据,而且即便可以访问,如果将所有的数据都放在Vue实例中,Vue实例就会变得非常臃肿。
Vue组件应该有自己保存数据的地方。
组件自己的数据存放在哪里?
组件对象也有一个data属性(也有method等属性);只是这个data属性必须是一个函数;而且这个函数返回一个对象,对象内部保存着数据;2、代码实例
Title <script src="../js/vue.js"></script><script> // 1.注册一个全局组件 Vue.component("cpn", { template: "#cpn", data() { return { title: "哪吒必胜" } } }) const app = new Vue({ el: "#app", data: { message: "你好", // title: "我是标题" } })</script>{{title}}
我是热门
3、效果展示
五、父子组件通信
1、父子组件通信简介
在开发中,往往一些数据确实需要从上层传递到下层:
比如在一个页面中,我们从服务器请求到了很多的数据。
其中一部分数据,并非是我们整个页面的大组件来展示的,而是需要下面的子组件进行展示。
这个时候,并不会让子组件再次发送一个网络请求,而是直接让大组件(父组件)将数据传递给小组件(子组件)。
如何进行父子组件间的通信呢?Vue官方提到:
通过props向子组件传递数据
通过事件向父组件发送消息
在组件中,使用选项props来声明需要从父级接收到的数据。
props的值有两种方式:
方式一:字符串数组,数组中的字符串就是传递时的名称。
方式二:对象,对象可以设置传递时的类型,也可以设置默认值等。
2、父传子代码实例
Title <script src="../js/vue.js"></script><script> // 父传子: props const cpn = { template: "#cpn", // props: ["cgirls", "cmessage"], props: { // 1.类型限制 // cgirls: Array, // cmessage: String, // 2.提供一些默认值, 以及必传值 cmessage: { type: String, default: "aaaaaaaa", required: true }, // 类型是对象或者数组时, 默认值必须是一个函数 cgirls: { type: Array, default() { return [] } } }, data() { return {} }, methods: { } } const app = new Vue({ el: "#app", data: { message: "CSDN哪吒", girls: ["云韵", "比比东", "雅妃"] }, components: { cpn } })</script>
- {{item}}
{{cmessage}}
3、父传子效果展示
4、props中的驼峰标识
Title <script src="../js/vue.js"></script><script> const cpn = { template: "#cpn", props: { cInfo: { type: Object, default() { return {} } }, childMyMessage: { type: String, default: "" } } } const app = new Vue({ el: "#app", data: { info: { name: "哪吒", age: 18, height: 1.88 }, message: "csdn博客专家" }, components: { cpn } })</script>{{cInfo}}
{{childMyMessage}}
效果展示
5、子传父(自定义事件方式)
自定义事件方式完成子传父。
什么时候需要自定义事件呢?
当子组件需要向父组件传递数据时,就要用到自定义事件了。
我们之前学习的v-on不仅仅可以用于监听DOM事件,也可以用于组件间的自定义事件。
自定义事件的流程:
在子组件中,通过$emit()来触发事件。
在父组件中,通过v-on来监听子组件事件。
6、子传父代码实例
Title <script src="../js/vue.js"></script><script> // 1.子组件 const cpn = { template: "#cpn", data() { return { categories: [ {id: "1", name: "云韵"}, {id: "2", name: "比比东"}, {id: "3", name: "雅妃"}, {id: "4", name: "纳兰嫣然"}, ] } }, methods: { btnClick(item) { // 发射事件: 自定义事件 this.$emit("item-click", item) } } } // 2.父组件 const app = new Vue({ el: "#app", data: { message: "csdn哪吒" }, components: { cpn }, methods: { cpnClick(item) { console.log("cpnClick", item); } } })</script>
7、子传父效果展示
【相关推荐:javascript视频教程、web前端】
以上就是Vue基础知识总结之vue组件化开发的详细内容,更多请关注php中文网其它相关文章!