Vue创建项目及基本语法 一

目录:

目录

• 目录:
• 一、创建Vue项目
  • 0.使用环境要求及说明
  • 1.使用命令创建项目
  • 2.启动项目
• 二、简单指令
  • 1.变量:
  • 2.动态绑定变量值
  • 3.v-once指令
  • 4.v-html解析html
  • 5.v-bind(解析属性中的对象)
    • 5.1 超链接标签 href属性值绑定
    • 5.2 v-bind 设置 css样式
    • 5.3 v-bind简写
  • 6.v-if 条件判断指令使用
    • 6.1 通过flag 标签来控制页面上显示的内容
    • 6.2 v-if 也可以在template上使用
  • 7. v-if 和 v-show的区别
  • 8 . v-for 循环
    • 遍历普通数组
    • 遍历对象数组
  • 9.v-on监听事件
    • 9.1使用说明
    • 9.2 事件传递参数
    • 9.3 数组检测更新
• 三、计算属性
  • 1.计算属性
    • 1.1 使用场景说明:
  • 2.计算属性和方法的区别
• 四、Class与Style的绑定
  • 1.使用场景
    • 场景1: 通过 data里的字符串变量来控制class的样式
    • 场景2: 通过一个标识符来控制css样式是否显示
    • 场景3: v-bind:class 可以和普通的class 共存而不是覆盖
    • 场景4: class可以传入多个控制对象
    • 场景5: 使用object对象控制css样式
    • 场景6： 数组语法
    • 场景7： 绑定Style属性
• 五、表单输入绑定
  • 1.基础用法
  • 2.修饰符
    • .lazy
    • .number
    • .trim
• 六、监听器
  • 1.使用方法
  • 2.计算属性 vs 侦听属性
• 七、基本组件创建
  • 1.创建组件
  • 2.在App.vue 中注册自定义的组件
    • 2.1 导入创建的组件
    • 2.2 注入创建的组件
    • 2.3 使用自定义组件
• 八、组件之间传递数据
  • 1.父组件传递变量值
  • 2.子组件使用props:[]接收
  • 3.在组件页面上使用
  • 4.使用效果
  • 5.也可以进行传递对象
  • 6.子级组件向父级组件传递数据
• 九、组件加载与keep-alive

一、创建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 中即可完成状态的保存