前端框架Vue安装使用

最新推荐文章于 2023-02-27 16:52:52 发布

码农的诞生

最新推荐文章于 2023-02-27 16:52:52 发布

阅读量410

点赞数 1

分类专栏： Vue 文章标签： Vue

本文链接：https://blog.csdn.net/m0_37845840/article/details/83053058

版权

Vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

首先说说vue和nodejs的关系，如果是传统的多页面应用，就把vue当成普通的js类库就行了，不需要和nodejs整合。只有做单页面应用的时候，需要使用nodejs体系，涉及到webpack打包、babel转译等技术。这些就不在这讲了，可以自己去查资料

这里讲的是windows版本还在摸索中。。。后期更新

node.js安装

先在node.js官网下载长期维护的版本

https://nodejs.org/zh-cn/

下载完毕后解压到你需要安装的目录，配置环境变量

Vue安装

打开命令提示符，安装淘宝镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org

npm install --global vue-cli

查看是否安装成功

vue -V

进入你需要创建项目的路径下

vue init webpack my_project

在项目目录下
npm install或者cnpm install
会运行package.json文件并加载相关依赖

vue-resource官方不再支持更新，推荐使用axios

安装axios插件依赖

npm install axios

cd my_project

npm install
npm run dev // 启动vue项目，默认端口号是8080，在网页上输入

http://localhost:8080查看是否安装成功

打开项目新建你需要的页面比如HelloWorld.vue

下面讲解代码的写法

</script>
Dom元素取值
<div id="app">
<p>
{{message}}
</p>
<input type="text" v-model="message">//有vue属性的dom元素可以用v-model取值
<input type="text" value="aaa" v-model="message">//如果明确value属性，先加载v-model,在加载value值。
</div>
双向数据绑定

## v-for之循环的使用

<ul>
<li v-for="(key,value) in jsonData">{{key}} {{value}}</li>//josn数据遍历
<li v-for="value in arr">{{$index}} {{value}}</li> //数组遍历获取下标和值
</ul>

## 条件判断v-if和v-else

<template v-if="true"> //true执行if,false执行else，这里的数据也可以从数据绑定取值
<p>if成立</p>
</template>
<template v-else>
<p>if不成立</p>
</template>

## v-show的使用

<p v-show="true"> //用法和作用与v-if类似，v-show不支持<template>标签
<p>show</p>
<input type="text" v-model="message" >
</p>

## 列表渲染完成后执行

var vue = new Vue({
           el : '#app',
           data:{
               items: [{"name": "zengchao", "value": 12}]
           },
           methods:{
               test: function(ev) {
                   console.info(ev);
                   vue.items = [{"name": "chao", "value": 23}];
                   // 如果列表数据发生变化，在列表DOM元素渲染完执行
                   vm.$nextTick(test);
               }
           }
       });
// 在vum初始化渲染完执行
vm.$nextTick(test);
function test() {
   console.info('dd');
}

## v-html的使用

// 把item.detail中的数据当作html标签渲染
<div v-html="item.detail"></div>

## 把DOM元素作为参数

<div id="app">
<a href="javascript:;" @click="test($event)">
</div>
var vue = new Vue({
           el : '#app',
           data:{
               items: [{"name": "zengchao", "value": 12}]
           },
           methods:{
               test: function(ev) {
                   console.info(ev);
               }
           }
       });

## v-model使用

<input v-model="seller.name">
<select v-model="seller.name">
// input和select都取seller.name的值，当值发生变化时，会实时绑定给seller.name
// v-model相当于value="seller.name" οnchange="seller.name = this.value"

## export,export default,import的区别

这是ES6的语法
export default在一个模块中只能有一个，当然也可以没有。export在一个模块中可以有多个。
export default的对象、变量、函数、类，可以没有名字。export的必须有名字。
export default对应的import和export有所区别
比如:
export default const a = 1;
export const a = 1;
对应的import分别是
import a from 'test'
import {a} from 'test' // export对应的import必须加上{}

## module.exports,exports,requre的区别

module.exports和exports是nodejs的模块使用
exports是module.exports的引用，模块最终导出的是module.exports
比如:
module.exports = {'name': 'zeng'}
exports.name = 'zeng';

## vue选项/数据data,props,methods,computed,watch

var vm = new Vue({
data() {return{seller: 'seller'}}, // 与data:{seller: 'seller'}的区别在于组件被其他组件重复使用函数的返回值的引用是独立的
props: {seller: {type: Object}} // props 可以是数组或对象，用于接收来自父组件的数据
methods: test() {} // 定义函数
computed: {
sellerCalc: function () {
return this.seller ? '':this.seller
},
getTime: function() {
return Date.now() // 计算属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算,这里没有依赖任何vue实例属性，所以结果一直是一样的
}
},
watch: {
seller: function(val, oldVal) {
console.info(val, oldVal) // 当seller值发生变化
},
'seller.name': function() {
// 当vm.seller.name值发生变化
}
}
})

## vue组件,动态组件

<template>
<v-header></v-header>

// 动态组件绑定
<component :is="myComponent"></component>
</template>
import Header 'common/Header'
export default {
data() {
myComponent: Header
}
components: {
'v-header': Header
}
}

##Vue 事件结合双向数据绑定实现todolist 待办事项

<template>
  <div id="app">
      <input type="text" v-model='todo' @keydown="doAdd($event)" />
  <br>
    <hr>
      <br>
    <h2>进行中</h2>
          <ul>
            <li v-for="(item,key) in list" v-if="!item.checked">
              <input type="checkbox" v-model='item.checked'> {{item.title}}   ----  <button @click="removeData(key)">删除</button>
            </li>
          </ul>
    <br>
    <h2>已完成</h2>
    <ul class="finish">
      <li v-for="(item,key) in list" v-if="item.checked">
          <input type="checkbox" v-model='item.checked'> {{item.title}} ----<button @click="removeData(key)">删除</button>
      </li>
    </ul>
    <h2 v-if='ok'>这是一个ok</h2>
    <h2 v-if='!ok'>这是一个No</h2>
    <button @click="getList()">获取list的值</button>

  </div>
</template>
<script>
    export default {     
      data () { 
        return {
          ok:false,
          todo:'' ,
          list: [
            {
              title: '录制nodejs',
              checked: true
            },
            {
              title: '录制ionic',
              checked: false
            }
          ]
        }
      },
      methods:{
        doAdd(e){
              console.log(e.keyCode)
              if(e.keyCode==13){
              //1、获取文本框输入的值   2、把文本框的值push到list里面
              this.list.push({
                title: this.todo,
                checked: false
              })
              this.todo='';
            }
        },
        removeData(key){
            // alert(key)
            //splice  js操作数组的方法
            this.list.splice(key,1);
        },
        getList(){
          console.log(this.list)
        }
      }
    }
</script>