Vue

引入Vue.js cdn

完整版

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

压缩版

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>

Vue入门程序

model层

    var ve = new Vue({
        el: "#app",
        data: {
            message: "hello,vue"
        }
    });

view层

<div id="app">
    {{message}}
</div>

Vue常用指令

v-text用法 (获取文本值)

view层

    <div id="app">
        <h1 v-text="message">长沙</h1>
    </div>

model层

        var vm = new Vue({
            el: "#app",
            data: {
                message: "v-text指令"
            }
        });

v-html用法（获取html标签）

view层

    <div id="app">
         <p v-html="message"></p>
    </div>

model层

        var vm = new Vue({
            el: "#app",
            data: {
                message: "<a href='www.baidu.com'>百度</a>"
            }
        });

v-on用法（绑定点击事件）

model层

    var ve = new Vue({
        el: "#app",
        data: {
            rainy: "绑定点击事件"
        },
        methods: {
            plane: function () {
                alert(this.rainy);
            }
        }
    });

view层

<div id="app">
    <button v-on:click="plane">点击我</button>
</div>

v-show用法(切换元素显示隐藏)

model层

        var vm = new Vue({
            el: "#app",
            data: {
                isShow: false
            },
            methods :{
                autumn: function(){
                    this.isShow = !this.isShow;
                }
            }
        });

view层

        <div v-show="isShow">Hello</div>
        <button @click="autumn">点击让我显示</button>

v-bind:title用法(为元素绑定属性：src,title,class选择器)

model层

    var ve = new Vue({
        el: "#app",
        data: {
            message: "绑定的提示信息"
        }
    });

view层

<div id="app">
    <span v-bind:title="message">绑定的提示信息</span>
</div>

v-if、v-else-if、v-else用法

model层

    var ve = new Vue({
        el: "#app",
        data: {
            type: "if-else"
        }
    });

view层

<div id="app">
    <h1 v-if="type==='if-else'">if</h1>
    <h1 v-else-if="type==='else-if'">else-if</h1>
    <h1 v-else>else</h1>
</div>

v-for用法

model层

    var ve = new Vue({
        el: "#app",
        data: {
            rainy: [
                {name: "ty",age: 12},
                {name: "ly",age: 22}
            ]
        }
    });

view层

<div id="app">
    <li v-for="rainys in rainy">
        {{rainys.name}}
    </li>
</div>

v-model用法

model层

    var ve = new Vue({
        el: "#app",
        data: {
            rainy: "双向绑定"
        }
    });

view层

<div id="app">
    性别：
    <input type="radio" v-model="rainy" value="男">男
    <input type="radio" v-model="rainy" value="女">女
    <p>选中了：   {{rainy}}</p>
</div>

自定义组件component

model层

    `#组件命名不能是中文，需要全小写`
	Vue.component("my", {
        props: ['cloudy'],
        template: '<span>{{cloudy}}</span>'
    });	
    var ve = new Vue({
        el: "#app",
        data: {
            rainy: "自定义组件"
        }
    });

view层

<div id="app">
    <my v-for="rainys in rainy" v-bind:cloudy="rainys">
    </my>
</div>

axios

引入依赖

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

vue-cli脚手架

需要的环境

Node.js：http://nodejs.cn/download/

确认nodejs是否安装成功：node -v 或 npm -v

安装Node.js淘宝镜像加速器（cnpm）

npm install cnpm -g		# -g 表示全局

安装 vue-cli

npm install vue-cli -g		# 如果安装了淘宝镜像加速器可以用 cnpm
vue list					# 查看是否安装成功

本机路径：C:\Users\Administrator\AppData\Roaming\npm\node_modules

初始化并运行

vue init webpack xxx
npm install
npm run dev

Vue ui构建项目

vue ui		#图形化界面选择自己需要的配置
vue add axios	# 添加axios插件
import './plugins/axios'  # 引入axios
npm install element-ui	# 安装element-ui
import ElementUi from 'element-ui'
import '../node_modules/element-ui/lib/theme-chalk/index.css'   //引入css
Vue.use(ElementUi)