Vue基础入门学习
vue安装
下载地址
https://cn.vuejs.org/v2/guide/installation.html
版本选择
选择开发版本下载
如何引入
直接用 <script> 引入，直接下载并用 <script> 标签引入，Vue 会被注册为一个全局变量。
<script src="js/vue.js"></script>
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标签就是挂载点，挂载点内部都是模板内容-->
<div id="root">
<!--v-on:click和@click效果一样，为简写形式-->
<div @click="welcome">{{msg}}</div>
<!--使用v-text直接输出转义后文本-->
<div v-text="content"></div>
<!--显示未转义文本-->
<div v-html="content"></div>
</div>
</div>
<script>
var root;
// vue实例
root=new Vue({
el:"#root",
//模拟内容
// template:'<h1>helllow {{msg}}</h1>',
data:{
msg:" world",
content:"<h1>111111</h1>"
},
//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标签就是挂载点，挂载点内部都是模板内容-->
<div id="root">
<!--使用v-bind做属性绑定，其中title是vue实例中的变量对象
可简写为:title即：冒号+属性名称，:+title -->
<div :title="'hey '+title"> hellow world !</div>
<input v-model="content"/>
<div>{{content}}</div>
<!--属性绑定语法：使用:+属性名称-->
<!--双向数据绑定语法：使用v-model="vue中的变量对象名称"-->
</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 button</button>
<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:"<li>{{content}}</li>"
}
)
//局部组件的使用
// var Todoitem={
// template:"<li>item</li>"
// }
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: "<li @click='isclick'>{{content}}</li>",
methods: {
isclick: function () {
//触发删除事件
this.$emit("delete", this.index)
}
}
}
)
//局部组件的使用
// var Todoitem={
// template:"<li>item</li>"
// }
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-cliDownloading vue-cli to E:\Program Files\nodejs\node_modules\vue-cli_tmp
Copying E:\Program Files\nodejs\node_modules\vue-cli_tmp\_vue-cli@2.9.6@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\_commander@2.20.3@commander
[2/20] multimatch@^2.1.0 installed at node_modules\_multimatch@2.1.0@multimatch
[3/20] ora@^1.3.0 installed at node_modules\_ora@1.4.0@ora
[4/20] consolidate@^0.14.0 installed at node_modules\_consolidate@0.14.5@consolidate
[5/20] rimraf@^2.5.0 existed at node_modules\_rimraf@2.7.1@rimraf
[6/20] minimatch@^3.0.0 installed at node_modules\_minimatch@3.0.4@minimatch
[7/20] async@^2.4.0 installed at node_modules\_async@2.6.3@async
[8/20] semver@^5.1.0 installed at node_modules\_semver@5.7.1@semver
[9/20] tildify@^1.2.0 installed at node_modules\_tildify@1.2.0@tildify
[10/20] uid@0.0.2 installed at node_modules\_uid@0.0.2@uid
[11/20] user-home@^2.0.0 installed at node_modules\_user-home@2.0.0@user-home
[12/20] read-metadata@^1.0.0 installed at node_modules\_read-metadata@1.0.0@read-metadata
[13/20] chalk@^2.1.0 installed at node_modules\_chalk@2.4.2@chalk
[14/20] validate-npm-package-name@^3.0.0 installed at node_modules\_validate-npm-package-name@3.0.0@validate-npm-package-name
[15/20] coffee-script@1.12.7 existed at node_modules\_coffee-script@1.12.7@coffee-script
[16/20] inquirer@^6.0.0 installed at node_modules\_inquirer@6.5.2@inquirer
[17/20] metalsmith@^2.1.0 installed at node_modules\_metalsmith@2.3.0@metalsmith
[18/20] download-git-repo@^1.0.1 installed at node_modules\_download-git-repo@1.1.0@download-git-repo
[19/20] handlebars@^4.0.5 installed at node_modules\_handlebars@4.5.3@handlebars
[20/20] request@^2.67.0 installed at node_modules\_request@2.88.0@request
deprecate metalsmith@2.3.0 › gray-matter@2.1.1 › 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\_vue-cli@2.9.6@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\_commander@2.20.3@commander
[2/20] multimatch@^2.1.0 installed at node_modules\_multimatch@2.1.0@multimatch
[3/20] ora@^1.3.0 installed at node_modules\_ora@1.4.0@ora
[4/20] consolidate@^0.14.0 installed at node_modules\_consolidate@0.14.5@consolidate
[5/20] rimraf@^2.5.0 existed at node_modules\_rimraf@2.7.1@rimraf
[6/20] minimatch@^3.0.0 installed at node_modules\_minimatch@3.0.4@minimatch
[7/20] chalk@^2.1.0 installed at node_modules\_chalk@2.4.2@chalk
[8/20] semver@^5.1.0 installed at node_modules\_semver@5.7.1@semver
[9/20] async@^2.4.0 installed at node_modules\_async@2.6.3@async
[10/20] uid@0.0.2 installed at node_modules\_uid@0.0.2@uid
[11/20] coffee-script@1.12.7 existed at node_modules\_coffee-script@1.12.7@coffee-script
[12/20] read-metadata@^1.0.0 installed at node_modules\_read-metadata@1.0.0@read-metadata
[13/20] tildify@^1.2.0 installed at node_modules\_tildify@1.2.0@tildify
[14/20] user-home@^2.0.0 installed at node_modules\_user-home@2.0.0@user-home
[15/20] metalsmith@^2.1.0 installed at node_modules\_metalsmith@2.3.0@metalsmith
[16/20] validate-npm-package-name@^3.0.0 installed at node_modules\_validate-npm-package-name@3.0.0@validate-npm-package-name
[17/20] download-git-repo@^1.0.1 installed at node_modules\_download-git-repo@1.1.0@download-git-repo
[18/20] request@^2.67.0 installed at node_modules\_request@2.88.0@request
[19/20] inquirer@^6.0.0 installed at node_modules\_inquirer@6.5.2@inquirer
[20/20] handlebars@^4.0.5 installed at node_modules\_handlebars@4.5.3@handlebars
deprecate metalsmith@2.3.0 › gray-matter@2.1.1 › 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.
> core-js@2.6.11 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 -)
> ejs@2.7.4 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/)
> uglifyjs-webpack-plugin@0.4.6 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 fsevents@1.2.11: 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...
# ========================
> my-project@1.0.0 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
以上是 Vue基础入门学习 的全部内容， 来源链接： utcz.com/z/376695.html
