Vue创建项目及基本语法 一
目录:
一、创建Vue项目
0.使用环境要求及说明
本文档仅作为个人学习笔记、详细内容可以查看官网文档，官方文档有更详细的使用说明及案例
node 版本大于等于8.9
1.使用命令创建项目
vue init webpack 【创建项目名称】
创建好项目之后，进入到创建项目的目录，然后执行命令
cnpm install
2.启动项目
npm start / npm run dev
打开浏览器的 localhost:8080 地址就可以看到了vue的启动情况。
二、简单指令
1.变量:
{{ 变量 }}
<div class="hello">
{{ "Hello World!" }}.</br>
{{ 20+1 }}.</br>
{{ "ok" ? 'Yes' : 'No' }}.</br>
{{ "Hello".split('').reverse().join('') }}
</div>
这些可以在html页面中渲染出来，支持单行语句，但是这个单行语句并不是 if(){}else{} 这种的单行语句的格式
2.动态绑定变量值
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App',
vueMessage: "Vue 新人.."
}
}
}
</script>
可以通过 data 里面的return设置返回的变量
3.v-once指令
只渲染一次，以后值改变了，但是如果使用这个指令标签修饰，以后值就算被修改了，也不会重新渲染
<p v-once>{{ vueMessage }}</p>
4.v-html解析html
语法:
<div v-html="htmlCode">
</div>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App',
vueMessage: "Vue 菜鸟..",
htmlCode: "<h3>这是一个三级标题</h3>"
}
}
}
</script>
5.v-bind(解析属性中的对象)
5.1 超链接标签 href属性值绑定
比如说给超链接中的href绑定属性，使用 href = "{{url}}" ,这样配置连接是不会生效的 href= {{url}},这样也不会生效 ，正确的使用方法如下
<a v-bind:href="url">{{ url_name }}</a>
这样使用 v-bind:属性名="变量值" 就可以动态的设置了
5.2 v-bind 设置 css样式
也可以使用这个属性来给 div设置 css样式
<div v-bind:class="div_style"></div>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App',
vueMessage: "Vue 菜鸟..",
htmlCode: "<h3>这是一个三级标题</h3>",
url_name: "淘宝",
url:"http://www.taobao.com",
div_style: "isActive"
}
}
}
</script>
使用效果
v-bind 实现 : 变量名-1 功能 ,可以进行字符串的拼接
<div v-bind:class="div_style+'-1'"></div>
实现效果:
<div data-v-469af010="" class="list-1"></div>
5.3 v-bind简写
总结： v-bind 也可以使用简写 ： ,省略v-bind 直接使用 :hre="变量名" 这样也可以实现同样的效果
6.v-if 条件判断指令使用
6.1 通过flag 标签来控制页面上显示的内容
<div v-if="flag">用户开关打开</div>
<div v-else>用户开关关闭</div>
data(){
return {
flag: true
}
}
6.2 v-if 也可以在template上使用
7. v-if 和 v-show的区别
v-if 只有当设置的属性值为真的时候才会在页面上创建html元素，但是v-show 元素是一直存在的 只不过是使用了display属性来控制
8 . v-for 循环
语法:
<h3>遍历普通数组</h3>
<ul>
<li v-for = "(book,index) in books">{{index}}========{{book}}</li>
</ul>
<h3>遍历对象数组</h3>
<ul>
<li v-for="(student,index) in students">{{index}}==={{student.name+" "+student.age}}</li>
</ul>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App',
vueMessage: "Vue 菜鸟..",
htmlCode: "<h3>这是一个三级标题</h3>",
url_name: "淘宝",
url:"http://www.taobao.com",
div_style: "list",
flag: true,
books: ['Java从入门到放弃','设计模式','数据结构与算法分析'],
students: [
{
name: 'zuoyan',
age: 23
},
{
name:'meihua',
age:23
},
{
name:'张三',
age: 48
}
]
}
}
}
</script>
上面的代码就会渲染出来下面的效果
遍历普通数组
- 0========Java从入门到放弃
- 1========设计模式
- 2========数据结构与算法分析
遍历对象数组
- 0===zuoyan 23
- 1===meihua 23
- 2===张三 48
9.v-on监听事件
9.1使用说明
使用v-on指令监听DOM事件，并在触发时执行一些JavaScript代码
<button v-on:click="switchHandler('Hello Vue', $event)" type="button" name="button">打开/关闭 按钮</button>
v-on:click 也可以简写成 @click="函数名称(参数.. ,$event)"
$event 是获取点击事件的详细信息
触发方法函数的编写
<script>
export default {
name: 'HelloWorld',
data () {
}
,
methods:{
switchHandler(data,$event)
{
console.log(data);
console.log(event);
//改变数值变量的boolean值
this.flag = !this.flag;
}
/*
switchHandler:function(data,$event) {
console.log(data);
console.log(event);
this.flag = !this.flag;
}
*/
}
}
</script>
methods 方法与 data 方法同级目录，直接通过this.变量名称就可以获取或者改变变量的值了
9.2 事件传递参数
$event
9.3 数组检测更新
数组的操作方法分为、返回一个原数组还是一个新生成的数组
变异方法:
改变原数组，则可以引起视图的更新
不改变原数组，创建新数组，则无法引起视图更新
可以引起视图更新的方法
push()pop()shift()unshift()splice()sort()reverse()
例如 filter()、concat() 和 slice() 。它们不会改变原始数组，而总是返回一个新数组
三、计算属性
1.计算属性
1.1 使用场景说明:
比如说，需要使用一个字符串，页面上显示的是这个字符串的每个字符的反转，比如说Hello，我有一个功能是在页面上显示Hello的反转，并且不是在一处使用到了这个变量，而是在页面上很多处使用到了Hello的反转。
<div id="example">
{{ message.split('').reverse().join('') }}
</div>
只要是需要显示的地方都需要调用这段代码，有点麻烦，此时就可以使用计算属性
<template lang="html">
<div>
{{message.split('').reverse().join('')}}
</br>
{{getMessage}}
</br>
{{getMessage}}
</div>
</template>
<script>
export default{
name: "Computed",
data() {
return{
message: "Hello"
}
},
computed:{
getMessage(){
return this.message.split('').reverse().join('');
}
}
}
</script>
<style scoped>
</style>
经过这样的计算属性，就可以不用重复的编写这样的计算代码了，只需要调用这个computed方法就可以了，有个好处是，如果数据没有改变就不需要重复计算。
2.计算属性和方法的区别
计算属性和方法使用的效果是一模一样的，但是不同的是计算属性是基于依赖进行的，如果属性值没有发生改变，那么数据就是从缓存中拿到的。但是方法每次都是需要重新进行计算的。
四、Class与Style的绑定
1.使用场景
场景1: 通过 data里的字符串变量来控制class的样式
<template lang="html">
<div :class="boxStyle">
</div>
<!--
或者通过
<div v-bind:class="boxStyle"></div>
-->
</template>
页面渲染结果为:
<div class="color"></div>
场景2: 通过一个标识符来控制css样式是否显示
<template lang="html">
<div :class="{'color':flag}">
</div>
</template>
<!--如果flag=ture 的页面渲染效果-->
<div class="color"></div>
通过变量flag的值，来控制 class="color"是否设置
场景3: v-bind:class 可以和普通的class 共存而不是覆盖
<template lang="html">
<div class="list" :class="box_style"></div>
</template>
<!--页面渲染的结果为-->
<div class="list color"></div>
场景4: class可以传入多个控制对象
<template lang="html">
<div class="list" :class="{color:flag , error:hasError }">
</div>
</template>
<script>
export default{
name: "Computed",
data() {
return{
message: "Hello",
box_style: "color",
flag: true,
hasError: true
}
},
computed:{
getMessage(){
return this.message.split('').reverse().join('');
}
}
}
</script>
<!--最后页面渲染出来的效果为-->
<div class="list color error"></div>
场景5: 使用object对象控制css样式
<div v-bind:class="cssObject"></div>
<script>
export default{
name: "Computed",
data() {
return{
message: "Hello",
box_style: "color",
flag: true,
hasError: false,
cssObject:{
"c1":true,
"c2":true
}
}
}
</script>
<!--上面代码渲染的结果为-->
<div class="c1 c2"></div>
场景6： 数组语法
需要传递css样式数组列表
<div :class="[activeClass,errorClass]"></div>
<script>
export default{
name: "Computed",
data() {
return{
activeClass: "active",
errorClass: "errorMessage",
}
}
</script>
页面渲染效果为:
<div class="active errorMessage"></div>
在数组中也可以使用三目运算式
<div :class="[flag?activeClass:'',errorClass]"></div>
渲染结果为:
<div class="active errorMessage"></div>
通过flag的boolean值，来设置css的样式
场景7： 绑定Style属性
<div :style="{color:'red',fontSize:'30px'}">
Style
</div>
<!--最后页面渲染效果-->
<div style="color: red; font-size: 30px;">
Style
</div>
上面style的属性值也可以通过变量动态设置
五、表单输入绑定
1.基础用法
语法使用 v-model 绑定需要在input输入绑定的变量名称
v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。
使用注意事项:
v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。
使用场景: 需求，需要在文本输入框的下面随时显示输入的文本内容
<input v-model="username" type="text" name="" value="">
<p>输入的用户名为:{{ username }}</p>
<!-- v-model 中使用的变量名称需要在data中声明 -->
这样就可以实现输入框中的数据实时显示。 其他form表单组件也支持，比如说 textarea ， 下面试试几个比较典型的组件，比如说单选框
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
也可以将多选框的多个值选项，绑定到一个变量上
<div id='example-3'>
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span>
</div>
new Vue({
el: '#example-3',
data: {
checkedNames: []
}
})
这样获取到的变量的值就是一个数组元素
2.修饰符
v-model 如果不设定修饰符，默认的效果就是，事实显示到页面上，但是有些需求是，输入完毕后失去焦点，或者点击按钮才显示，这样就需要lazy处理修饰了。
.lazy
在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步。你可以添加 lazy 修饰符，从而转变为使用 change 事件进行同步：
<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg" >
.number
如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：
<input v-model.number="age" type="number">
这通常很有用，因为即使在 type="number" 时，HTML 输入元素的值也总会返回字符串。如果这个值无法被 parseFloat() 解析，则会返回原始的值。
.trim
如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：
<input v-model.trim="msg">
六、监听器
1.使用方法
<input v-model="username" type="text" name="" value="">
<p>输入的用户名为:{{ username }}</p>
<script>
export default{
watch:{
username(data){
console.log(data);
}
}
}
</script>
只需要在 default中创建一个 watch对象，里面创建一个和v-model 中变量名称一样的方法，然后传递一个参数，这个参数就可以获取 属性改变的值，这个方法在每次绑定值改变的时候被调用。
2.计算属性 vs 侦听属性
Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性。当你有一些数据需要随着其它数据变动而变动时，你很容易滥用 watch——特别是如果你之前使用过 AngularJS。然而，通常更好的做法是使用计算属性而不是命令式的 watch 回调。细想一下这个例子：
<div id="demo">{{ fullName }}</div>
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
},
watch: {
firstName: function (val) {
this.fullName = val + ' ' + this.lastName
},
lastName: function (val) {
this.fullName = this.firstName + ' ' + val
}
}
})
上面代码是命令式且重复的。将它与计算属性的版本进行比较：
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar'
},
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
}
})
使用计算属性看起来比使用侦听属性简单多了，业务复杂也降低了。
七、基本组件创建
1.创建组件
在src 文件夹下的components 文件夹下创建 Learn.vue
<template>
<!-- 每个组件只允许有一个根容器 -->
<div class="container">
Learn 组件
</div>
</template>
<script>
export default{
// 可选项，设置组件名称，默认规范是和文件名称一样
name: "Learn",
data(){
return {
}
}
}
</script>
<style lang="css" scoped>
</style>
组件主要包括三个部分，template 、 script 、 style
template中允许有且只有一个根容器，然后script 中的 data 中设置的，组件的初始状态，style中设置的是页面样式
2.在App.vue 中注册自定义的组件
说明：创建组件的原因，主要是增加组件的复用性。
2.1 导入创建的组件
import Learn from './components/Learn'
最后一个其实是Learn.vue 后缀名称可以进行省略
2.2 注入创建的组件
export default {
name: 'App',
components: {
HelloWorld,
Learn
}
}
2.3 使用自定义组件
<template>
<div id="app">
<img src="./assets/logo.png">
<!-- <HelloWorld/> -->
<!-- <Computed/> -->
<Learn/>
</div>
</template>
这样就可以在页面上显示用户自定义的组件了。
八、组件之间传递数据
1.父组件传递变量值
<template>
<div id="app">
<img src="./assets/logo.png">
<!-- <HelloWorld/> -->
<!-- <Computed/> -->
<Learn dataInfo ="study vue..."/>
</div>
</template>
在App.vue 使用到自组件的地方，传递属性值 dataInfo = "study vue....."
2.子组件使用props:[]接收
在Learn.vue 中使用 props 接收父类传递过来的变量
<script>
export default{
// 可选项，设置组件名称，默认规范是和文件名称一样
name: "Learn",
data(){
return {
}
},
props:['dataInfo']
}
</script>
3.在组件页面上使用
<template>
<!-- 每个组件只允许有一个根容器 -->
<div class="container">
Learn 组件
{{dataInfo}}
</div>
</template>
4.使用效果
5.也可以进行传递对象
<template>
<div id="app">
<img src="./assets/logo.png">
<!-- <HelloWorld/> -->
<!-- <Computed/> -->
<Learn :dataInfo ="dataInfo"/>
</div>
</template>
**注意点: **如果传递的是对象，需要在传递对象的时候使用 ： 号，才可以传递 data中绑定的对象数据
使用效果:
6.子级组件向父级组件传递数据
子组件通过事件向父组件传递值，需要通过自定义事件来传递
<button @click="sendMessage" name="button" type="button">向父级组件传递数据</button>
在script中声明方法
<script>
export default {
// 可选项，设置组件名称，默认规范是和文件名称一样
name: "Learn",
data() {
return {}
},
props: ['dataInfo'],
methods: {
sendMessage(){
this.$emit("getMessage","From son Data")
}
}
}
</script>
上面的this.$emit中的getMessage方法就是父组件获取子组件传递过来数据的方法，第二个参数就是需要传递的数据
在父组件中使用方法接收就可以了
<Learn :dataInfo ="dataInfo" @getMessage="getSonMessage"/>
export default {
name: 'App',
components: {
HelloWorld,
Computed,
Learn
},
data(){
return {
sonData: "",
dataInfo: {
name: "zuoyan",
age: 23,
address: "银河系太阳系地球亚洲中国"
}
}
},
methods:{
getSonMessage(data){
this.sonData = data;
}
}
}
@接收子组件方法名="方法名"，然后在方法名的函数中获取子组件传递过来的数据。
九、组件加载与keep-alive
场景需求就是切换组件过后，在返回回来需要原来的组件保持原来的状态
<keep-alive>
<component v-bind:is="currentComponent"></component>
</keep-alive>
将组件加载 放在keep-alive 中即可完成状态的保存
