vue安装
下载地址
https://cn.vuejs.org/v2/guide/installation.html
版本选择
选择开发版本下载
如何引入
直接用
Vue基础入门学习
Vue入门程序
DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Vue入门程序 title>
<script src="js/vue.js">script>
head>
<body>
<div id="root">
<div @click="welcome">{{msg}}div>
<div v-text="content">div>
<div v-html="content">div>
div>
div>
<script>
var root;
// vue实例
root=new Vue({
el:"#root",
//模拟内容
// template:'helllow {{msg}}
',
data:{
msg:" world",
content:"111111
"
},
//methods中定义事件及函数方法
methods:{
welcome:function () {
this.msg="hellow world!"
}
}
})
script>
body>
html>
Vue中的属性绑定和双向数据绑定
DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Vue中的属性绑定和双向数据绑定title>
<script src="js/vue.js">script>
head>
<body>
<div id="root">
<div :title="'hey '+title"> hellow world !div>
<input v-model="content"/>
<div>{{content}}div>
div>
<script>
var root;
// vue实例
root=new Vue({
el:"#root",
data:{
title:"hellow world !",
content:"this is content!"
}
})
script>
body>
html>
小结
使用v-bind做属性绑定，其中title是vue实例中的变量对象
可简写为:title即：冒号+属性名称，如：:+title
属性绑定语法：使用:+属性名称
双向数据绑定语法：使用v-model="vue中的变量对象名称"
Vue中的计算属性和侦听器
DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Vue中的计算属性和侦听器title>
<script src="js/vue.js">script>
head>
<body>
<div id="root">
姓<input v-model="firstName"/>
名<input v-model="lastName"/>
<div>{{fullName}}div>
<div>{{count}}div>
侦听器值得是监听某个数据的变化，一旦变化就可以在监听方法了，做业务逻辑
计算属性computed，指的是他是有其他属性经过运算而来，即新的结果
div>
<script>
var root;
root=new Vue({
el:"#root",
data:{
firstName:"",
lastName:"",
count:0
},
computed:{
fullName:function () {
return this.firstName+" "+this.lastName
}
},
watch:{
fullName:function () {
this.count++;
}
}
})
script>
body>
html>
侦听器值得是监听某个数据的变化，一旦变化就可以在监听方法了，做业务逻辑
计算属性computed，指的是他是有其他属性经过运算而来，即新的结果
v-if, v-show与v-for指令
DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml"
xmlns:key="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>v-if, v-show与v-for指令title>
<script src="js/vue.js">script>
head>
<body>
<div id="root">
<div v-if="show">{{content}}div>
<button @click="isDisplay">my buttonbutton>
<ul>
<li v-for="(item,index) of list" :key="index">{{item}}li>
<li v-for="item of list">{{item}}li>
ul>
div>
<script>
var app;
new Vue({
el:"#root",
data:{
content:"hellow world!",
list:[1,2,3],
show:true
},
methods:{
isDisplay:function () {
this.show=!this.show;
}
}
})
script>
body>
html>
v-if
有移除元素标签的效果，控制dom的存在与否
v-show
控制dom的显示与否，元素显示或隐藏
v-for
控制一组数据，控制一组数据，通过控制一组数据来循环显示一组数据的dom结构
todolist功能开发
DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml"
xmlns:key="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>todolist功能开发title>
<script src="js/vue.js">script>
head>
<body>
<div id="root">
<input v-model="inputValue"/>
<button @click="submit">提交button>
<ul>
<li v-for="(item,index) of list" :key="index">{{item}}li>
ul>
div>
<script>
var app;
app=new Vue({
el:"#root",
data:{
inputValue:'',
list:[]
},
methods:{
submit:function () {
//使用push为数据赋值
this.list.push(this.inputValue);
this.inputValue=''
}
}
})
script>
body>
html>
todolist组件拆分
DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml"
xmlns:key="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>todolist组件拆分title>
<script src="js/vue.js">script>
head>
<body>
<div id="root">
<input v-model="inputValue"/>
<button @click="submit">提交button>
<ul>
<todo-item v-for="(item,index) of list" :key="index" :content="item">todo-item>
ul>
div>
<script>
// 全局组件
Vue.component("todo-item",{
props:["content"],
template:"{{content}} "
}
)
//局部组件的使用
// var Todoitem={
// template:"item "
// }
var app;
app=new Vue({
el:"#root",
// components:{
// "todo-item":Todoitem
// },
data:{
inputValue:'',
list:[]
},
methods:{
submit:function () {
//使用push为数据赋值
this.list.push(this.inputValue);
this.inputValue=''
}
}
})
script>
body>
html>
todolist的删除功能
DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml"
xmlns:key="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>实现todolist的删除功能title>
<script src="js/vue.js">script>
head>
<body>
<div id="root">
<input v-model="inputValue"/>
<button @click="submit">提交button>
<ul>
<todo-item v-for="(item,index) of list" :key="index" :content="item" :index="index"
@delete="ieDelete">todo-item>
ul>
div>
<script>
// 全局组件
Vue.component("todo-item", {
props: ['content', 'index'],//接收显示的内容和下标
template: "{{content}} ",
methods: {
isclick: function () {
//触发删除事件
this.$emit("delete", this.index)
}
}
}
)
//局部组件的使用
// var Todoitem={
// template:"item "
// }
var app;
app = new Vue({
el: "#root",
// components:{
// "todo-item":Todoitem
// },
data: {
inputValue: '',
list: []
},
methods: {
submit: function () {
//使用push为数据赋值
this.list.push(this.inputValue);
this.inputValue = ''
},
ieDelete: function (index) {
//从对应下标中删除一项
this.list.splice(index, 1)
}
}
})
script>
body>
html>
C:\Users\ASUS>cnpm install --global vue-cli Downloading vue-cli to E:\Program Files\nodejs\node_modules\vue-cli_tmp Copying E:\Program Files\nodejs\node_modules\vue-cli_tmp\[email protected]@vue-cli to E:\Program Files\nodejs\node_modules\vue-cli Installing vue-cli's dependencies to E:\Program Files\nodejs\node_modules\vue-cli/node_modules [1/20] commander@^2.9.0 installed at node_modules\[email protected]@commander [2/20] multimatch@^2.1.0 installed at node_modules\[email protected]@multimatch [3/20] ora@^1.3.0 installed at node_modules\[email protected]@ora [4/20] consolidate@^0.14.0 installed at node_modules\[email protected]@consolidate [5/20] rimraf@^2.5.0 existed at node_modules\[email protected]@rimraf [6/20] minimatch@^3.0.0 installed at node_modules\[email protected]@minimatch [7/20] async@^2.4.0 installed at node_modules\[email protected]@async [8/20] semver@^5.1.0 installed at node_modules\[email protected]@semver [9/20] tildify@^1.2.0 installed at node_modules\[email protected]@tildify [10/20] [email protected] installed at node_modules\[email protected]@uid [11/20] user-home@^2.0.0 installed at node_modules\[email protected]@user-home [12/20] read-metadata@^1.0.0 installed at node_modules\[email protected]@read-metadata [13/20] chalk@^2.1.0 installed at node_modules\[email protected]@chalk [14/20] validate-npm-package-name@^3.0.0 installed at node_modules\[email protected]@validate-npm-package-name [15/20] [email protected] existed at node_modules\[email protected]@coffee-script [16/20] inquirer@^6.0.0 installed at node_modules\[email protected]@inquirer [17/20] metalsmith@^2.1.0 installed at node_modules\[email protected]@metalsmith [18/20] download-git-repo@^1.0.1 installed at node_modules\[email protected]@download-git-repo [19/20] handlebars@^4.0.5 installed at node_modules\[email protected]@handlebars [20/20] request@^2.67.0 installed at node_modules\[email protected]@request deprecate metalsmith@2.3.0 › [email protected] › coffee-script@^1.12.4 CoffeeScript on NPM has moved to "coffeescript" (no hyphen) All packages installed (239 packages installed from npm registry, used 13s(network 13s), speed 407.65kB/s, json 223(445.52kB), tarball 4.55MB) [vue-cli@2.9.6] link E:\Program Files\nodejs\vue@ -> E:\Program Files\nodejs\node_modules\vue-cli\bin\vue [vue-cli@2.9.6] link E:\Program Files\nodejs\vue-init@ -> E:\Program Files\nodejs\node_modules\vue-cli\bin\vue-init [vue-cli@2.9.6] link E:\Program Files\nodejs\vue-list@ -> E:\Program Files\nodejs\node_modules\vue-cli\bin\vue-list C:\Users\ASUS>cnpm install --global vue-cli Downloading vue-cli to E:\Program Files\nodejs\node_modules\vue-cli_tmp Copying E:\Program Files\nodejs\node_modules\vue-cli_tmp\[email protected]@vue-cli to E:\Program Files\nodejs\node_modules\vue-cli Installing vue-cli's dependencies to E:\Program Files\nodejs\node_modules\vue-cli/node_modules [1/20] commander@^2.9.0 installed at node_modules\[email protected]@commander [2/20] multimatch@^2.1.0 installed at node_modules\[email protected]@multimatch [3/20] ora@^1.3.0 installed at node_modules\[email protected]@ora [4/20] consolidate@^0.14.0 installed at node_modules\[email protected]@consolidate [5/20] rimraf@^2.5.0 existed at node_modules\[email protected]@rimraf [6/20] minimatch@^3.0.0 installed at node_modules\[email protected]@minimatch [7/20] chalk@^2.1.0 installed at node_modules\[email protected]@chalk [8/20] semver@^5.1.0 installed at node_modules\[email protected]@semver [9/20] async@^2.4.0 installed at node_modules\[email protected]@async [10/20] [email protected] installed at node_modules\[email protected]@uid [11/20] [email protected] existed at node_modules\[email protected]@coffee-script [12/20] read-metadata@^1.0.0 installed at node_modules\[email protected]@read-metadata [13/20] tildify@^1.2.0 installed at node_modules\[email protected]@tildify [14/20] user-home@^2.0.0 installed at node_modules\[email protected]@user-home [15/20] metalsmith@^2.1.0 installed at node_modules\[email protected]@metalsmith [16/20] validate-npm-package-name@^3.0.0 installed at node_modules\[email protected]@validate-npm-package-name [17/20] download-git-repo@^1.0.1 installed at node_modules\[email protected]@download-git-repo [18/20] request@^2.67.0 installed at node_modules\[email protected]@request [19/20] inquirer@^6.0.0 installed at node_modules\[email protected]@inquirer [20/20] handlebars@^4.0.5 installed at node_modules\[email protected]@handlebars deprecate metalsmith@2.3.0 › [email protected] › coffee-script@^1.12.4 CoffeeScript on NPM has moved to "coffeescript" (no hyphen) All packages installed (239 packages installed from npm registry, used 14s(network 13s), speed 391.4kB/s, json 223(445.52kB), tarball 4.55MB) [vue-cli@2.9.6] link E:\Program Files\nodejs\vue@ -> E:\Program Files\nodejs\node_modules\vue-cli\bin\vue [vue-cli@2.9.6] link E:\Program Files\nodejs\vue-init@ -> E:\Program Files\nodejs\node_modules\vue-cli\bin\vue-init [vue-cli@2.9.6] link E:\Program Files\nodejs\vue-list@ -> E:\Program Files\nodejs\node_modules\vue-cli\bin\vue-list C:\Users\ASUS> C:\Users\ASUS>vue init webpack my-project C:\Users\ASUS>"E:\Program Files\nodejs\\node.exe" "E:\Program Files\nodejs\\node_modules\vue-cli\bin\vue" init webpack my-project 'git' �����ڲ����ⲿ���Ҳ���ǿ����еij��� ���������ļ��� ? Project name my-project ? Project description A Vue.js project ? Author rongrong ? Vue build standalone ? Install vue-router? No ? Use ESLint to lint your code? Yes ? Pick an ESLint preset Standard ? Set up unit tests No ? Setup e2e tests with Nightwatch? No ? Should we run `npm install` for you after the project has been created? (recommended) npm vue-cli · Generated "my-project". # Installing project dependencies ... # ======================== npm WARN deprecated extract-text-webpack-plugin@3.0.2: Deprecated. Please use https://github.com/webpack-contrib/mini-css-extract-plugin npm WARN deprecated browserslist@2.11.3: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools. npm WARN deprecated bfj-node4@5.3.1: Switch to the `bfj` package for fixes and new features! npm WARN deprecated core-js@2.6.11: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3. npm WARN deprecated browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools. npm WARN deprecated circular-json@0.3.3: CircularJSON is in maintenance only, flatted is its successor. > [email protected] postinstall C:\Users\syp831\my-project\node_modules\core-js > node -e "try{require('./postinstall')}catch(e){}" Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library! The project needs your help! Please consider supporting of core-js on Open Collective or Patreon: > https://opencollective.com/core-js > https://www.patreon.com/zloirock Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -) > [email protected] postinstall C:\Users\syp831\my-project\node_modules\ejs > node ./postinstall.js Thank you for installing EJS: built with the Jake JavaScript build tool (https://jakejs.com/) > [email protected] postinstall C:\Users\ASUS\my-project\node_modules\webpack\node_modules\uglifyjs-webpack-plugin > node lib/post_install.js npm notice created a lockfile as package-lock.json. You should commit this file. npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.11 (node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}) added 1322 packages from 707 contributors and audited 12454 packages in 273.689s 23 packages are looking for funding run `npm fund` for details found 13 vulnerabilities (1 low, 8 moderate, 4 high) run `npm audit fix` to fix them, or `npm audit` for details Running eslint --fix to comply with chosen preset rules... # ======================== > [email protected] lint C:\Users\syp831\my-project > eslint --ext .js,.vue src "--fix" # Project initialization finished! # ======================== To get started: cd my-project npm run dev Documentation can be found at https://vuejs-templates.github.io/webpack