永恒い☆心

【VUE网站文档】

VUE项目下载(scss版) VUE项目下载 VUE精简版配置vue、配置less、配置jquery、配置mint-ui插件

【vue前端教程】

src文件结构
0如果本机没有安装node运行环境，请下载node 安装包进行安装
0.1 如果本机已经安装node的运行换，请更新至最新的node 版本
下载地址：https://nodejs.org/en/?或者?http://nodejs.cn/

1、npm install -g cnpm --registry=https://registry.npm.taobao.org
2、cnpm install -g vue-cli
3、vue init webpack e:\vue_project (最后这个是创建的项目文件夹的名字)
4、cnpm install (路径必须是项目文件路径),
在cmd中输入
e: 盘符
cd vue_project 文件夹名称
cnpm install 创建
5、cnpm run dev
！！！如果有问题或者不行
把【node_modules】删除，
重新【cnpm install】

先对默认的文件进行改造一下。
删除了默认的 App.vue、Hello.vue。
然后加了一个 list.vue。
修改一下main.js
然后看到页面打印出一个 “列表页” 三个字的时候，就表示成功了。

1、实例1

先弄个最简单的实例看看是不是能跑起来。

main.js

import Vue from 'vue'
import App from './view/list' //文件路径
import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})

[vue用法]【查看代码】

【vue打包上传】

npm run build

[必须要配置的就是/config/index.js]

查看或下载config/index.js的配置
可以发现，我就改了两处，就是assetsPublicPath所对应的值，我这里用的是./，我也用webapps下的命的项目名试过，只是没得到我想要的结果，后来我还是改成了./

[使用vue-router的情况]

当你在项目中使用vue-router的时候，就需要给src/router/index.js添点东西，如下面：

export default new Router({
mode : 'history',这句要去掉
zhe base: '/ttms/', //添加的地方
...
}

上传后本地浏览会异常，需要把配置再改回来
会遇到的问题

【vue less安装】

全局安装 webpack

cnpm install webpack -g

本地安装 webpack

cnpm install webpack -D

配置less

cd 你的项目路径
cnpm install less less-loader --save

安装成功后，打开 build/webpack.base.conf.js ，在 module.exports = 的对象的 module.rules 后面添加一段：
查看安装教程

[安装完成后在 webpack.config.js的modules 设置内加入以下配置：]

{
test: /\.less$/,
loader: "style-loader!css-loader!less-loader",
}

在/assets/中添加一个todos.less文件，饼在App.vue的组件定义内引入less样式表

import './assets/todos.less'
export default{
//....省略
}

或者使用的时候在style标签里加上lang=”less”里面就可以写less的代码了(style标签里加上 scoped 为只在此作用域有效)
<style scoped lang="less">
@import "./assets/style";
</style>
使用import将样式表直接导入到代码的效果是：webpack的less-loader会生成一些代码，在页面运行的时候
将编译后的less代码生成到<style>标签内并自动插入到页面的<head>中，

【vue index序号】

<ol v-for="(todo,index) in lists" id="yanse" :id="index">
<li>{{index+1}}{{todo.name}}</li>
<li>{{index+2}}{{todo.price}}</li>
<li>{{index+3}}{{todo.unit}}</li>
</ol>

【vue 样式绑定】

完整代码下载
将done=true的li绑定一个checked样式类，vue的属性绑定语法是通过v-bind来实现的，完整写法位v-bind:class="",但v-bind可以采用缩写形式，“:”标识即:class=""

<ol v-for="(todo,index) in lists" id="yanse">
<li>{{index+1}}{{todo.name}}</li>
<li :class="{checked:done}">{{index+2}}{{todo.price}}</li>
<li>{{index+3}}{{todo.unit}}</li>
</ol>

JS

CSS

.checked{
text-decoration: underline;
font-size: 18px;
font-weight: bold;
background: #ddd;
}

绑定内联样式

data: {
activeColor: 'red',
fontSize: 30
}

直接绑定到一个样式对象通常更好，这会让模板更清晰
：

data: {
styleObject: {
color: 'red',
fontSize: '13px'
}
}

【vue 过滤器+样式绑定】

完整代码下载

<ol>
<li v-for="todo in todos" :class="{'checked':todo.done}">{{todo.text}}<time>{{todo.created | date}}</time></li>
</ol>

.checked{
text-decoration: underline;
font-size: 18px;
font-weight: bold;
background: #ddd;
}
time{margin-left:20px;}

安装时间格式化专用包moment.js

npm i moment -S

import moment from 'moment'
import 'moment/locale/zh-cn'
moment.locale('zh-cn')
export default {
data() {
return{
todos:[
{
text:'我正在学习vue',
done:false,
created:Date.now()
},
{
text:'你现在在干什么',
done:true,
created:Date.now()+30000000
},
{
text:'我也不知道啊',
done:false,
created:Date.now()-222222222
},
]
}
},
filters:{
date(val){
return moment(val).calendar()
}
}
}

【vue 引用js】

[全局引用]

配置main.js文件

import '../config/rem' //import加上你问js路径

[单页引用]

直接放在要引用的vue文件中

【vue 配置scss sass

[全局引用]

找到项目路径

cnpm install --save-dev sass-loader
cnpm install --save-dev node-sass

在build文件夹下的webpack.base.conf.js的rules里面添加配置

{
test: /\.sass$/,
loaders: ['style', 'css', 'sass']
}

在APP.vue中修改style标签
<style lang="scss">

[语法]

$blue: #3190e8;
$bc: #e4e4e4;
@mixin borderRadius($radius) {
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    -ms-border-radius: $radius;
    -o-border-radius: $radius;
    border-radius: $radius;
}
//宽高
@mixin wh($width, $height) {
    width: $width;
    height: $height;
}
//调用
.content{
    @include wh(0, 0);
    border:$bc;
}

【vue 引用css】

[全局引用]

配置main.js文件

import '../config/style.css' //import加上你问css路径必须带.css

[单页引用]

直接放在要引用的vue文件中

【vue 路由、地址】

[安装]

cnpm i vue-router -D

[2.0新方法]

下载vue页面下载index.js页面
html

在router文件中修改index.js

import Vue from 'vue'
import Router from 'vue-router'

const indexPage = r => require.ensure([], () => r(require('@/views/index/indexPage')), 'indexPage');

Vue.use(Router)

export default new Router({
routes: [{
path: '/',
name: 'indexPage',
component: indexPage,
meta: {
keepAlive: true
}
}, ]
})

[老的]

vue-router实例是一个Vue插件，我们需要在Vue全局引用中通过Vue.use()将它接入到vue实例当中。main.js是程序入口文件，所有的全局性配置都会在这个文件中进行打开main.js文件并加入以下引用

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

【vue 路由跳转新页面子容器可打开新窗口】

App.vue下载 Main.vue下载 index.js下载
例：
App.vue作为最大的容器(只需有<router-view></router-view>)
Main.vue作为子容器
index.js配置

【vue 切页动效动画切换】

App.vue下载 Main.vue下载 index.js下载
例：
App.vue作为最大的容器(只需有<router-view></router-view>)
Main.vue作为子容器
index.js配置

【vue 返回上一页】

<span @click="$router.back(-1)">返回上一页</span>

【vue 引用mint-ui插件新】

http://mint-ui.github.io/docs/#/zh-cn2

npm install mint-ui -S

<div class="hello" @click="tishi()">hellow word!</div>

//放在main.js
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
Vue.use(MintUI)

//放在当前页面
import { Toast } from 'mint-ui';
export default {
  methods: {
    //事件
    tishi (){
      Toast({
        message: '提示',
        position: 'bottom',
        duration: 5000
      });
    },
  },
};

【vue 引用mint-ui插件】

http://mint-ui.github.io/docs/#/zh-cn2

npm install mint-ui -S

安装完成后，在node_modules文件夹找到mint-ui文件夹换在别的文件中

// 引入全部组件放在main.js里面
import Vue from 'vue';
import './mint-ui/lib/style.css'
import Mint from 'mint-ui';
Vue.use(Mint);

// 按需引入部分组件
import { Cell, Checklist } from 'minu-ui';
Vue.component(Cell.name, Cell);
Vue.component(Checklist.name, Checklist);

//放在当前页面
import { Swipe, SwipeItem } from 'mint-ui';

【vue src图片绑定】

本地图片路径写法

swipeList:[
{
id:'1',
src:require('../assets/sw1.jpg')
},{
id:'2',
src:require('../assets/sw2.jpg')
},{
id:'3',
src:require('../assets/sw3.jpg')
},{
id:'4',
src:require('../assets/sw4.jpg')
},{
id:'5',
src:require('../assets/sw5.jpg')
},
]

【vue 函数】

http://mint-ui.github.io/docs/#/zh-cn2

methods: {
shopToast() {
Toast("提示信息");
},
}

【vue 图片懒加载预加载延迟加载】

http://mint-ui.github.io/docs/#/zh-cn2

放在main.js文件中

import VueLazyload from 'vue-lazyload' //引入这个懒加载插件
Vue.use(VueLazyload)

【vue 表格 table】

table源代码

【vue 调用组件生成组件】

// 引入组件
import BookList from '../../components/bookList/BookList.vue';
// 注册组件
components:{
BookList,
},
// 使用组件
<BookList></BookList>

vue自带选中样式

router-link-exact-active：配置当链接被精确匹配的时候应该激活的CSS类名。 router-link-active：设置链接激活时使用的 CSS 类名。如果要修改CSS样式命名，可通过<router-link>属性exact-active-class和active-class分别设置，也可通过路由构造函数选项linkExactActiveClass和linkActiveClass来设置博文链接！

【vue 组件传值】

[组件页]

<div>{{title}}</div>

export default {
props:[
'title',
'books'
],
}

[父页]

// 引入组件
import BookList from '../../components/bookList/BookList.vue';
// 注册组件
components:{
BookList,
},
data() {
return{
name:'首页',
}
}

【vue 防止刷新页面消失】

【vue 关闭eslint校验报错提示错误】

我们只要修改build\webpack.base.conf.js这个文件就好啦。

【vue v-for错误警告解决】

v-for="(role,index) in roles " :key="index"

【vue 点击显示再点击隐藏】

xport default {
  data() {
    return{
      isShow:false,
    }
  },
  methods: {
    toggle:function() {
      this.isShow = !this.isShow;
    }
  }

【vue 点击当前增加添加class，其他删除class】

0 查看图片教程

<li v-for="(sc,index) in screenList" :key="index" @click="addClassFun(index)" v-bind:class='{className:index==current}'><span>{{sc.title}}</span></li>

export default {
  data() {
    return{
      current:0,
    }
  },
  methods: {
    addClassFun: function(index) {
      this.current = index;
    }
  }
}

【vue tab切换选项卡】

查看图片教程

<li v-for="(pn,index) in proNav" :key="index" @click="toggleTabs(index)" v-bind:class='{pronavcur:index==currentPro}'><span>{{pn.title}}</span></li> <div class="divTab" v-show="nowIndex===0">我是tab1</div> <div class="divTab" v-show="nowIndex===1">我是tab2</div>

export default {
  data() {
    return{
      nowIndex:false,
    }
  },
  methods: {
    //选项卡
    toggleTabs:function(index){
      this.nowIndex=index;
    },
    //关闭弹框
    closeEject:function(){
      this.nowIndex=false;
    }
  }
}

【vue 里面通过v-for循环出来多个相同样式的div,根据index值给每个div添加不同的id名】

【vue 获取html元素内容获取内容】

1.给dom添加点击事件和ref属性

2.然后在点击事件方法中使用ref

  setPageMenu(index) {
    //这个是获取当前menuItem值，用index来区分当前元素是v-for 产生的数组中的第几个数
    let getMenuText = this.$refs.menuItem[index].innerText;
    //将获取到的元素内容赋值给其他元素
    document.getElementById("headTitle").innerText=getMenuText
  }

【vue 根据id跳转页面】

1.给dom添加点击事件和ref属性

<router-link :to="{ name:'proinfo', params:{ id: 123}}" tag="dl" class="clearfix" v-for="(pro,index) in Product" :key="index">

{ name: 'product', path: '/Product/Product', component: product },
{ name: 'proinfo', path: '/Product/Proinfo/:id', component: proinfo },

【vue 判断元素数量个数li】

this.menus.length

详细

export default {
data() {
return{
newDetaList:[
{ title:'产品' },
],
detaList:[
{ title:'产品' },
{ title:'产品' }
]
}
},
methods: {
//增加产品
addPro: function() {
//判断已有产品的数量 detaList就是上面的
let dtatNum = this.detaList.length;
if(dtatNum<4){
this.detaList.push(this.newDetaList);
// 添加完newDetaList对象后，重置newPerson对象
this.newDetaList = {title: '产品'}
}
else{
alert("最多添加4个产品！");
}
},
}
}

【vue 循环自动动态添加追加class】

export default {
  data() {
    return{
      detaList:[
        { class:'pconin-btn pconinBgOrange', plan:'A' },
        { class:'pconin-btn pconinBgBlue', plan:'B' }
      ]
    }
  },
}

【vue if 根据index判断第几个显示】

从第二个开始显示

判断ABCD

【vue 循环自动动态添加追加 html class】

export default {
data() {
return{
newDetaList:{
class:'pconin-btn pconinBgGreen',
plan:'C',
},
detaList:[
{ class:'pconin-btn pconinBgOrange', plan:'A' },
{ class:'pconin-btn pconinBgBlue', plan:'B' }
]
}
},
methods: {
//增加产品 addPro: function() {
this.detaList.push(this.newDetaList);
// 添加完newPerson对象后，重置newPerson对象
this.newDetaList = {class: 'pconin-btn pconinBgGreen', plan: 'C'}
},
//删除产品 deletePro:function(index){
this.detaList.splice(index,1);
}
}
}

【vue 添加class】

data(){
return {
isChoose : false
}
},
methods:{
togglePay:function(){
this.isChoose = !this.isChoose
}
}

【vue 页面切换动画过渡动画】

打开复制直接用

【vue 配置jquery】

1、安装

cnpm install jquery -S

2、修改webpack配置文件build/webpack.base.conf.js

var webpack = require("webpack") // 1. 确保引入 webpack，后面会用到
// 2. 定义别名和插件位置
'jquery': 'jquery'
plugins: [
    // 3. 配置全局使用 jquery
    new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery",
        jquery: "jquery",
        "window.jQuery": "jquery"
    })
]

【vue 执行computed、methods、watch、created】

export default{
data(){
return{
list:''
}
},
computed:{
ss:function(){
return this.list+'zhe shi s'
},
},
created(){
console.log('this is ff')
this.ff();
},
mounted() {
//优惠券合作品牌选项卡
$(".sign_ticket_nav li").click(function(){
$(this).addClass("active").siblings("li").removeClass("active")
})
},
methods:{
ff(){
console.log('this is ff fun')
}
}
}

通俗来讲，
computed是在HTML DOM加载后马上执行的，如赋值；
mounted() 类似jquery$(function(){})
而methods则必须要有一定的触发条件才能执行，如点击事件；
watch呢？它用于观察Vue实例上的数据变动。对应一个对象，键是观察表达式，值是对应回调。值也可以是方法名，或者是对象，包含选项。
所以他们的执行顺序为：默认加载的时候先computed再watch，不执行methods；等触发某一事件后，则是：先methods再watch。
下面的例子可以做为说明。
computed 属性 vs watched 属性：Vue 确实提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：watch 属性。当你有一些数据需要随着其它数据变动而变动时，你很容易滥用 watch——特别是如果你之前使用过 AngularJS。然而，通常更好的想法是使用 computed 属性而不是命令式的 watch 回调。

【VUE网站文档】

【vue前端教程】

1、实例1

main.js

[vue用法]【查看代码】

【vue打包上传】

[必须要配置的就是/config/index.js]

[使用vue-router的情况]

【vue less安装】

【vue index序号】

【vue 样式绑定】

【vue 过滤器+样式绑定】

【vue 引用js】

[全局引用]

[单页引用]

【vue 配置scss sass

[全局引用]

[语法]

【vue 引用css】

[全局引用]

[单页引用]

【vue 路由、地址】

[安装]

[2.0新方法]

[老的]

【vue 路由跳转新页面 子容器 可打开新窗口】

【vue 切页动效 动画 切换】

【vue 返回上一页】

【vue 引用mint-ui插件 新】

【vue 引用mint-ui插件】

【vue src图片绑定】

【vue 函数】

【vue 图片懒加载 预加载 延迟加载】

【vue 表格 table】

【vue 调用组件 生成组件】

vue自带选中样式

【vue 组件传值】

[组件页]

[父页]

【vue 防止刷新页面消失】

【vue 关闭eslint校验 报错 提示 错误】

【vue v-for错误警告解决】

【vue 点击显示再点击隐藏】

【vue 点击当前增加添加class，其他删除class】

【vue tab切换选项卡】

【vue 里面通过v-for循环出来多个相同样式的div,根据index值给每个div添加不同的id名】

【vue 获取html元素内容 获取内容】

【vue 根据id跳转页面】

【vue 判断元素数量个数li】

【vue 循环 自动 动态添加 追加class】

【vue if 根据index判断第几个显示】

【vue 循环 自动 动态添加 追加 html class】

【vue 添加class】

【vue 页面切换动画 过渡动画】

【vue 配置jquery】

【vue 执行computed、methods、watch、created】

抱歉，找不到您搜索的内容~

Sorry, the site now can not be accessed.

【vue 路由跳转新页面子容器可打开新窗口】

【vue 切页动效动画切换】

【vue 引用mint-ui插件新】

【vue 图片懒加载预加载延迟加载】

【vue 调用组件生成组件】

【vue 关闭eslint校验报错提示错误】

【vue 获取html元素内容获取内容】

【vue 循环自动动态添加追加class】

【vue 循环自动动态添加追加 html class】

【vue 页面切换动画过渡动画】