图片 1Web前端-Vue.js必备框架

图片 2Web前端-Vue.js必备框架

图片 3Web前端-Vue.js必备框架

Web前端-Vue.js必备框架

Web前端-Vue.js必备框架

Web前端-Vue.js必备框架

vue调式工具vue-devtools

页面组件,商品列表组件,详情组件,购物车清单组件,结算页组件,订单详情组件,订单列表组件。

vue是一款渐进式javascript框架,由evan you开发。vue成为前端开发的必备之一。

过滤器:vue.js允许你自定义过滤器,可被用作一些常见的文本格式化。

vue-router 路由vuex 组件集中管理webpackvue-cli

vue的好处轻量级,渐进式框架,响应式更新机制。

mustache插值和v-bind表达式。vue生命周期,从创建,运行,到销毁,称为生命周期。

node下载:

开发环境,浏览器使用chrome,ide:vs code或者webstormnode.js8.9+npm

new Vue() : var vm = new Vue 开始创建一个Vue实例对象

init 表示初始化一个Vue空的实例对象,这时候,这个对象上有一些生命周期和默认时间
http://nodejs.cn/

uni-app直接使用<script>引入vue.jsvue会被注册为一个全局变量,开发环境不要使用压缩版本,一:开发版本有完整的警告和调式模式,二:生产版本删除了警告。

ajax, vue-resource实现get,post,jsonp

node-v使用vue-cli脚手架搭建项目

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>dashu</title> <script src="./lib/vue-2.4.0.js"></script> <link rel="stylesheet" href="./lib/bootstrap-3.3.7.css"></head><body> <div > <div > <div > <h3 >添加品牌</h3> </div> <div > <label> Id: <input type="text" v-model="id"> </label> <label> Name: <input type="text" v-model="name"> </label> <input type="button" value="添加" @click="add()"> <label> 搜索关键字: <input type="text" v-model="keywords"> </label> </div> </div> <table > <thead> <tr> <th>Id</th> <th>Name</th> <th>Ctime</th> <th>Operation</th> </tr> </thead> <tbody> <tr v-for="item in search" :key="item.id"> <td>{{ item.id }}</td> <td v-text="item.name"></td> <td>{{ item.ctime }}</td> <td> <a href="" @click.prevent="del">删除</a> </td> </tr> </tbody> </table> </div> <script> var vm = new Vue({ el: '#app', data: { id: '', name: '', keywords: '', list: [ { id: 1, name: 'a', ctime: new Date() }, { id: 2, name: 'b', ctime: new Date() } ] }, methods: { add() { var c = { id: this.id, name: this.name, ctime: new Date() } this.list.push this.id = this.name = '' }, del { var index = this.list.findIndex(item => { if (item.id == id) { return true; } }) this.list.splice }, search { return this.list.filter(item => { if (item.name.includes) { return item } }) } } }); </script></body></html>

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>dashu</title> <script src="./lib/vue-2.4.0.js"></script> <link rel="stylesheet" href="./lib/bootstrap-3.3.7.css"></head><body> <div > <div > <div > <h3 >添加品牌</h3> </div> <div > <label> Id: <input type="text" v-model="id"> </label> <label> Name: <input type="text" v-model="name" @keyup.f2="add"> </label> <input type="button" value="添加" @click="add()"> <label> <input type="text" v-model="keywords" v-focus v-color="'green'"> </label> </div> </div> <table > <thead> <tr> <th>Id</th> <th>Name</th> <th>Ctime</th> <th>Operation</th> </tr> </thead> <tbody> <tr v-for="item in search" :key="item.id"> <td>{{ item.id }}</td> <td v-text="item.name"></td> <td>{{ item.ctime | dateFormat() }}</td> <td> <a href="" @click.prevent="del">删除</a> </td> </tr> </tbody> </table> </div> <div > <h3 v-color="'pink'" v-fontweight="900" v-fontsize="50">{{ dt | dateFormat }}</h3> </div> <script> Vue.filter('dateFormat', function (dateStr, pattern = "") { var dt = new Date var y = dt.getFullYear() var m = dt.getMonth() + 1 var d = dt.getDate() if (pattern.toLowerCase() === 'yyyy-mm-dd') { return `${y}-${m}-${d}` } else { var hh = dt.getHours() var mm = dt.getMinutes() var ss = dt.getSeconds() return `${y}-${m}-${d} ${hh}:${mm}:${ss}` } }) Vue.config.keyCodes.f2 = 113 Vue.directive('focus', { bind: function  { }, inserted: function  { el.focus() }, updated: function  { } }) Vue.directive('color', { bind: function (el, binding) { el.style.color = binding.value } }) var vm = new Vue({ el: '#app', data: { id: '', name: '', keywords: '', list: [ { id: 1, name: 'a', ctime: new Date() }, { id: 2, name: 'b', ctime: new Date() } ] }, methods: { add() { var car = { id: this.id, name: this.name, ctime: new Date() } this.list.push this.id = this.name = '' }, del { var index = this.list.findIndex(item => { if (item.id == id) { return true; } }) this.list.splice }, search { return this.list.filter(item => { if (item.name.includes) { return item } }) } } }); var vm2 = new Vue({ el: '#app2', data: { dt: new Date() }, methods: {}, filters: { dateFormat: function (dateStr, pattern = '') { var dt = new Date var y = dt.getFullYear() var m = (dt.getMonth.toString().padStart var d = dt.getDate().toString().padStart if (pattern.toLowerCase() === 'yyyy-mm-dd') { return `${y}-${m}-${d}` } else { var hh = dt.getHours().toString().padStart var mm = dt.getMinutes().toString().padStart var ss = dt.getSeconds().toString().padStart return `${y}-${m}-${d} ${hh}:${mm}:${ss} ~~~~~~~` } } }, directives: { 'fontweight': { bind: function (el, binding) { el.style.fontWeight = binding.value } }, 'fontsize': function (el, binding) { el.style.fontSize = parseInt(binding.value) + 'px' } } }) </script></body></html>

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>dashu</title> <script src="./lib/vue-2.4.0.js"></script></head><body> <div > <p>{{ msg | msgFormat('a+1', 'abc') | test }}</p> </div> <script> Vue.filter('msgFormat', function (msg, arg, arg2) { return msg.replace(/单纯/g, arg + arg2) }) Vue.filter('test', function  { return msg + 'vvvvvv' }) var vm = new Vue({ el: '#app', data: { msg: '我是一个单纯的少年' }, methods: {} }); </script></body></html>

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>dashu</title> <script src="./lib/vue-2.4.0.js"></script></head><body> <div > <input type="button" value="修改msg" @click="msg='No'"> <h3 >{{ msg }}</h3> </div> <script> var vm = new Vue({ el: '#app', data: { msg: 'ok' }, methods: { show() { } }, beforeCreate() { // data 和 methods 中的 数据还没有初始化 }, created() { // data 和 methods 都已经初始化好了 }, beforeMount() { // 模板已经在内存中编辑完成了,但未把 模板渲染到 页面中 }, mounted() { // 内存中的模板已经挂载到了页面中,用户可以看到渲染好的页面了 }, beforeUpdate() { // 表示界面还没有被更新 }, updated() { // 页面和 data 数据已经同步了 } }); </script></body></html>

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>dashu</title> <script src="./lib/vue-2.4.0.js"></script> <!-- this.$http.jsonp --> <script src="./lib/vue-resource-1.3.4.js"></script></head><body> <div > <input type="button" value="get请求" @click="getInfo"> <input type="button" value="post请求" @click="postInfo"> <input type="button" value="jsonp请求" @click="jsonpInfo"> </div> <script> var vm = new Vue({ el: '#app', data: {}, methods: { getInfo() { this.$http.get('http://vue').then(function  { }) }, postInfo() { // application/x-wwww-form-urlencoded this.$http.post('http://vue', {}, { emulateJSON: true }).then(result => { }) }, jsonpInfo() { this.$http.jsonp('http://vue').then(result => { }) } } }); </script></body></html>

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>dashu</title></head><body> <script> function showInfo123 { console.log } </script><script src="http://##?callback=showInfo123"></script></body></html>
vue+webpack+es6

https://github.com/vuejs/vue-cli

// 全局下载工具npm install -g vue-cli// 下载基于webpack模板项目vue init webpack Smartisancd Smartisan// 下载项目依赖的所有模块npm installnpm run dev

生产环境:

好了,欢迎在留言区留言,与大家分享你的经验和心得。

图片 4官网图片 5效果图片 6表示成功

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.8/dist/vue.js"></script>

感谢你学习今天的内容,如果你觉得这篇文章对你有帮助的话,也欢迎把它分享给更多的朋友,感谢。

// 淘宝镜像cnpm install -g vue-cli

vue init webpack Smartisan

开发:

作者简介

图片 7效果

<!DOCTYPE html><head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" media="screen" href="main.css"> <script src="main.js"></script></head><body><div > {{ message }} <ol> <todo-item v-for="item in arrList" v-bind:todo="item" v-bind:key="item.id"></todo-item> </ol></div> <script src="https://cdn.jsdelivr.net/vue@2.6.8/dist/vue.js"></script><script> Vue.component('todo-item', { props: ['todo'], template: '<li > {{ todo.text }} </li>' }) var app = new Vue({ el: '#app', data: { message: 'hello', arrList: [{ id: 0, text: 'da' },{ id: 1, text: 'shu' }] } })</script> </body></html>

<body> <div > {{message}} </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.8/dist/vue.js"></script> <script> var app = new Vue({ el: '#app', data: { message: 'hello', } }) </script></body>

vue CLInpm install -g @vue/clivue create hellocd hellonpm run serve

达叔,理工男,简书作者&全栈工程师,感性理性兼备的写作者,个人独立开发者,我相信你也可以!阅读他的文章,会上瘾!,帮你成为更好的自己。长按下方二维码可关注,欢迎分享,置顶尤佳。

// 进入项目cd Smartisan// 运行我们的项目npm run dev

属性:自定义属性,原生属性,特殊属性。

图片 8努力努力再努力Jeskson

图片 9搭建成功图片 10成功

组件中props中声明属性。

cnpm install vuex --save

npm install vuex --save
vue组件=vue实例=new Vue

引入Vuex,它是为vue开发的状态管理模式,采用集中式存储管理应用的所有组件的状态,以相应的规则保证状态以一种可预测的方式发生变化。

图片 11组件三大核心

图片 12效果图片 13效果

每一个vue组件都是一个vue实例,vue实例通过new vue函数创建的。

import Vue from 'vue'import Vuex from 'vuex'Vue.useconst state = { pjtnews: 0, count: 1}const mutations = { add { state.count += 1; }, reduce { state.count -= 1; }}export default new Vuex.Store({ state, mutations});

事件:普通事件,修饰符事件。

计算属性

@click @input @change 普通事件

@input.trim @click.stop @submit.prevent 修饰符事件

<template> <div> name: {{ name || "--" }} <br/> <input :value="name" @change="handleChange"/> <br/> <div @click="handleDivClick"> <buttom @click="handleClick">成功</button>&nbsp; <button @click.stop="handleClick">失败</button> </div> </div></template><script>export default { name: "EventDemo", props: { neme: String }, methods: { handleChange { this.$emit("change", e.targer.value); }, handleDivClick() { this.$emit("change", ""); }, handleClick { //e.stopPropagation(); } }};</script>

发表评论

电子邮件地址不会被公开。 必填项已用*标注