Code example reference:
https://gitee.com/feistel/Blog/tree/master/%E5%89%8D%E7%AB%AF/forTest/src
webpack Project Example Reference:
https://gitee.com/feistel/Blog/tree/master/%E5%89%8D%E7%AB%AF/demo
Initial knowledgeVue.js
It provides common advanced features in modern Web development:
- Decoupling views and data
- Reusable components
- Front End Routing
- State Management
- Virtual DOM
instructions
v-html
Insert Html
v-pre
The character inside the decorated element will not be compiled and converted
v-bind
> :
Dynamically update attributes of HTML or component elements, such as id,class,href,src, etc.
How v-bind binds class es:
-
Object Grammar
<div :class="{'active': isActive}"></div>
Render as <div class="active"></div>when isActive is true
-
Array syntax
<div> :class="[activeCls, errorCls]"</div> date: { activeCls: 'active', errorCls: 'error' }
Rendered as <div class="active error"></div>
Inline style style is the same as class usage.
v-on
> @
Listen for native DOM events
Event modifiers (which can be concatenated), such as .stop, stop click event bubble? @Submi.preventSubmit the event without overloading the page .capture .self @click.once, triggered only once @Click.nativeThat modifies a native event For @keyCode, including, but not limited to: .enter .tab .esc .up .down .left .right
v-cloak
It will be removed from the bound html element at the end of the Vue instance compilation, andDisplay:noneCooperative use Main solution whenVue.jsWhen not loaded, the text {{xxx}} appears on the page, flashes over, and will not be replaced until the Vue creates the instance, which can be viewed at F5 consecutively.
<style type="text/css"> [v-cloak] { display: none; } </style> <div id="app" v-cloak> </div>
v-once
After the first rendering, it is no longer re-rendered as the data changes and is considered static content, which is used when optimization is required. v-if,v-else-if,v-else conditional rendering
v-show
Show when true.Change the css attribute display of the element. Compared with v-if, it is suitable for scenarios with frequent switching conditions.
v-for
Modified elements are rendered circularly.Usage such as:
<ul> <li v-for="book in books">{{ book.name }}</li> </ul>
v-model
@input
When using the Chinese input method, the data will not be bound in real time without word selection.You can do this with @input, as follows
<input type="text" @input="handleInput" placeholder="Real-time input."> <h1>Not yet selected words will also be shown:{{ message }}</h1> methods: { handleInput: function (e) { this.message = e.target.value; } }
Similar to event v-on(@), v-model(:) also has modifiers to control when data is synchronized.
.lazy
<input type="text" v-model.lazy="namee" placeholder="Your Name">
Not real-time changes, but updates when you lose focus or return
.number
Convert input to Number type
.trim
Automatically filter first and last spaces of input
Custom directives
Global directives
Vue.directive('focus', { // Instruction Options })
Local directives
var app = new Vue({ el: '#app', directives: { focus: { // Instruction Options } } })
Render the page so that input gets the focus.
<input type="text" v-focus> Vue.directive('focus', { inserted: function (el) { el.focus(); } });
hook
- bind, the first binding to an element is a call
- Inserted, called when a bound element is inserted into a parent node, for example, when rendering a page
- Update, called on the last update where the bound element is located
- componentUpdated, called when the template containing the bound element completes an update cycle
- unbind, called when an instruction is unbound from an element
Parameters of hook function
- el, the element bound by the directive, which can be used to manipulate the DOM directly
- binding, including the following properties
- Name, instruction name, not including v-prefix, e.g. v-focus, name is focus
- Value, the value bound by the instruction, such as v-focus="1+1", value 2
- oldValue, the previous value of the directive
- Expression, the binding is worth string form, such as v-focus="1+1", expression is "1+1"
- Arg, the parameter passed to the instruction, such as v-focus:foo, arg is foo
- Modifiers, an object containing modifiers, such as v-focus.foo.bar, modifiers is {foo: true, bar: ture}
- vnode, virtual node generated by Vue compilation
- oldVnode, last virtual node
Computing attributes
computed
Can only be used as an attribute, not'()', i.e. parameter cannot be sent.
The difference between computed and methods is:
-
Unable to accept parameters
-
When used as an attribute, not a method, you cannot add'()'
-
Calculated properties are based on dependent caches, for example, Calculation Date.now(), does not refresh, but on methods.
<div> {{ now }}</div> <div> {{ nowDate() }}</div> // Computing attributes computed: { now: function () { return Date.now(); } }, methods: { nowDate: function () { return Date.now(); } },
Forms and v-model s
radio button
<br> <input type="radio" v-model="picked" value="html" id="id_html"> <label for="html">HTML</label> <br> <input type="radio" v-model="picked" value="js" id="id_js"> <label for="js">javaScript</label> <p>The selected item is: {{ picked }} </p> picked: "js"
check box
-
Bind a Boolean value with v-model when used individually
-
When combined, bind to the same array type
<br> <input type="checkbox" v-model="checked" value="html" id="id_html"> <label for="html">HTML</label> <br> <input type="checkbox" v-model="checked" value="js" id="id_js"> <label for="js">javaScript</label> <p>The selected item is: {{ checked }} </p> checked: []
Selection list (drop-down box)
<select v-model="selected" multiple> <option></option> <option value="js">javaScript</option> <option value="css">css</option> </select> <p>The selected item is: {{ selected }} </p> selected: []
assembly
Global Components
Vue.component('my-component', { template: '<div>Component Content</div>' })
Local Components
var Child = { template: '<div>Component Content</div>' } var app = new Vue({ el: '#app', component: { 'my-component': Child } })
Component Data and Methods
When using data, unlike the Vue instance, the data must be a function and then return the data.
Vue.component('my-component', { template: '<div>{{ message }}</div>', data: function () { return { message: 'Component Content' } } });
Transferring data using props
The parent component contains child components, and the parent component is forwarding data or parameters, which is achieved through props.
> The changes to Vue 2.x and Vue 1.x are that props pass data in one direction and only forward to subcomponents.Decouple parent-child components whenever possible. > > Vue 1.x provides the.sync modifier to support bidirectional binding.
In a component, the props option declares data to be accepted from the parent, which can be:
-
array
<!-- html Case insensitive. Naming must be separated by a horizontal bar --> <!-- The data passed in is usually not written to death, but dynamic data from the parent, using v-bind To dynamically bind. --> <input type="text" v-model="parentMessage"> <my-component :props-message="parenMessage"></my-component> Vue.component('my-component', { // Must be named after a hump props: ['propsMessage'], template: '<div>{{ propsMessage }}--{{ message }}</div>', data: function () { return { message: 'Component Content' } } });
-
object
Object Writing is required when prop needs validation.
props: { propsMessage: { type: Boolean, default: true } }
Typee type s can be:
String
Number
Boolean
Object
Array
Function
Component Communication
Custom Events
Use this. $emit ('increase') in the component.This.counter; trigger events
Use <my-component @increase="handleIncrease"></my-component> to accept events and process them in handleIncrease where components are used.
Where,This.counterRepresents the data that is passed from the component and will be used as a parameter to the handleIncrease as follows:
function handleIncrease (counter) {}
>Grammatical sugar: > >Use this. $emit ('input') in the component.This.counter; trigger events > >Use <my-component v-model="currentCounter"></my-component> > >You can then reverse-bind the subclass data to the currentCounter of the parent component.
Non-parent-child component communication
Vue.js 1.x
$.dispatch() and $broadcast() are provided inVue.js2.x Waste
Use this.$dispatch('on-message','data for internal components') within a component; send events
Vue.js 2.x
1. Use a central event bus
>When the project is large, you can choose a better state management solution vuex
var bus = new Vue(); Vue.component('my-component', { template: '<button @click="handleEvent">Delivery Event</button>', methods: { handleEvent: function () { bus.$emit('on-message', 'Come from my-component Component data'); } } }); var app = new Vue({ el: '#app', data: { message: '' }, mounted: function () { var _this = this; bus.$on('on-message', function (msg) { _this.message = msg; }); } });
2. Parent Chain
Use this. $directly in subcomponentsParent.message, message represents a variable above the parent.
Or use the parent component, this.$children.message
>Parent chains make parent-child components tightly coupled, preferably communicating through props and $emit.
3. Subcomponent Index
Add ref attribute when using components
<my-component ref="comA"></my-component>
Use this. $Refs.comA.messageGets the component's internal data, and the message represents the component's internal variables.
Distributing content using slot s
> Content distributed by slot, scoped on the parent component. > >People: slot distribution refers to content within a component, such as <my-component><p>content</p></my-component>, where'<p>content</p>'denotes content to be distributed; distribution refers to content that will be inserted into subcomponents.The scope of this compiled content is the parent component, not the child component.
Other
$nextTick
methods: { getText: function () { this.$nextTick (function () { var text = document.getElementById('div').innerHTML; console.log(text); }); } }
>Because Vue updates DOM principle asynchronously.Instead of updating the DOM directly, Vue opens a queue and buffers it in the same event loop. In the next event loop tick, Vue refreshes the queue and performs the actual work.
$nextTick indicates execution in the next event loop.
Manually mount components
new MyComponent().$mount('#mount-div');
Using Webpack 2
>Single Page Rich Applications (SPA) is an application with only one Web page.A single-page application (SPA) is a Web application that loads a single HTML page and dynamically updates it when a user interacts with the application. > >Baidu Encyclopedia https://baike.baidu.com/item/SPA/17536313?fr=aladdin
Vue Project Configuration
New directory demo directory
npm init will generate aPackage.jsonfile
npm init
Install webpack locally
npm install webpack --save-dev
Using the command--save, or not writing--save, records information in dependencies dependencies records all the files the project needs to run Use the command--save-dev to record information in devDependencies The devDependencies record files that the project needs to use during development, but not when it is ultimately published
>--save and--save-dev: > > https://blog.csdn.net/cvper/article/details/88728505
Install webpack-dev-server locally, which provides many services, such as starting a server, hot updates, and interface proxies.
npm install webpack-dev-server --save-dev
install
npm install webpack-cli
Package.jsonFile contents:
{ "name": "demo", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC", "devDependencies": { "webpack": "^4.43.0", "webpack-dev-server": "^3.11.0" }, "dependencies": { "webpack-cli": "^3.3.11" } }
The webpack is a.js configuration file.
New emptyMain.jsFile, as the entry file.
new fileWebpack.config.jsAs follows
var path = require('path'); var config = { entry: { main: './main' }, output: { // Specify output directory for packaged files path: path.join(__dirname, './dist'), // Specify the directory referenced by the resource file publicPath: '/dist/', // Specify the name of the output file filename: 'main.js' } }; module.exports = config;
Newly buildIndex.htmlAs an entry to SPA
<meta charset="utf-8"> <title>webpack App</title> <div id="app"> Hello World. </div> <script type="text/javascript" src="/dist/main.js"></script>
To configurePackage.json, when npm run dev is run, the command is executed.The default address is 127.0.0.1:8080.
"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev": "webpack-dev-server --open --config webpack.config.js" },
Start with command
npm run dev
stayMain.jsFile, add, save, browser will display changes in real time, this is the hot update function of webpack-dev-server.
document.getElementById('app').innerHTML = 'Hello webpack';
Perfect project configuration
Different modules in a webpack require different loaders to handle them.
npm install css-loader --save-dev npm install style-loader --save-dev
Refer specifically to the demo folder:
https://gitee.com/feistel/Blog/tree/master/%E5%89%8D%E7%AB%AF/demo
Not finished.
> "Vue.js Actual War Liang Hao