精华内容
下载资源
问答
  • 一、基本使用{{ greeting }}let vm = newVue({el:"#odiv",data: {greeting:"hello world",}})二、常用指令1、v-text、v-htmlgreeting: "hello world"2、v-for:循环创建标签{{ num }}{{ student.name }}yin: [1, 2, ...

    一、基本使用

    {{ greeting }}

    let vm = newVue({

    el:"#odiv",

    data: {

    greeting:"hello world",

    }

    })

    二、常用指令

    1、v-text、v-html

    greeting: "

    hello world

    "

    2、v-for:循环创建标签

    {{ num }}
    {{ student.name }}

    yin: [1, 2, 3]

    students: [{name:"yin"}, {name: "wen"}, {name: "jie"}]

    3、v-if、v-show

    v-if是先append多个标签,如果不符合条件再remove,这样来回切换的效率较低。

    v-show是给不符合条件的标签加上display=none,效率更高一些。

    还是
    没有
    你好

    4、v-bind:绑定属性

    点击

    isActive:true,

    attr:"active"

    5、v-on:绑定事件

    点击
    // 可以简写成@click

    methods:{

    change:function(){xxx}

    }

    6、v-model:获取用户输入

    康抻

    鞠莹莹

    嘉琪


    {{ name }}

    {{ genders }}

    {{ girlfriends }}

    //数据模板引擎

    //v-开头的指令是帮助我们渲染数据用的

    let vm = newVue({

    el:"#app",

    data: {

    name:"juyingying",

    genders: [],

    girlfriends: []

    },

    })

    View Code

    7、计算属性:对数据进行加工操作

    {{ total }}

    data:{a:1,b:2,c:3},

    computed:{

    total:function(){return this.a + this.b + this.c

    }

    }

    8、侦听器:当数据发生改变时触发

    data: {

    question:'',

    answer:'I cannot give you an answer until you ask a question!'},

    watch: {//如果 `question` 发生改变,这个函数就会运行

    question: function(newQuestion, oldQuestion) {this.answer = 'Waiting for you to stop typing...'

    this.debouncedGetAnswer()

    }

    },

    9、指令修饰符:对用户输入的数据加工

    v-model.number="xx" //将输入的数据改为数值类型

    v-model.trim="xx" //将输入的数据两端的空白去除

    v-model.lazy="xx" //在失去焦点时才更新数据

    10、获取DOM元素

    点击变红

    newVue({

    el:"#app",

    data: {

    greeting:"hello world",

    },

    methods:{

    changeColor:function(){this.$refs.t.style.color = "red";

    }

    }

    })

    11、自定义指令

    Vue.directive("pos", function(el, bindding){ //第一个参数是指令名称,第二个参数是一个函数,其中参数1是绑定的标签,参数2是传入的数据

    if (bindding.value=true){

    el.style.position= "fixed";

    el.style.right= 0;

    el.style.bottom= 0;

    }

    })

    三、组件

    1、全局组件和局部组件

    全局组件就是定义之后不用在Vue对象中注册,可以并且只可以在html中使用的。局部组件必须在父组件中注册,但是可以在任意的组件中使用。

    template: `你点击了{{ times }}次`,

    data(){return{

    times:0,

    }

    }

    });newVue({

    el:"#app",

    })

    全局组件

    ContractedBlock.gif

    ExpandedBlockStart.gif

    template:`你点击了{{ times }}次`,

    data(){return{

    times:0,

    }

    }

    };newVue({

    el:"#app",

    components:{

    Box:Box,

    }

    })

    局部组件

    2、父子组件通信

    ContractedBlock.gif

    ExpandedBlockStart.gif

    //子组件

    let son ={

    template: `

    {{ fdata }}

    `,

    props: ["fdata", ]

    }//父组件

    let father ={

    template: `

    `,

    data(){return{

    fData:0}

    },

    components:{

    son: son,

    }

    }

    父向子传值

    如果在子组件中想要监听这个值的变化可以使用侦听器

    ContractedBlock.gif

    ExpandedBlockStart.gif

    template:`点击变大`,

    methods:{

    sonClick(){this.$emit("sonClick", 1)

    }

    }

    };

    let father={

    template: `

    字体大小

    `,

    data(){return{

    size:10}

    },

    components:{

    son: son,

    },

    methods:{

    changeSize(num){

    console.log(num);this.size +=num;

    console.log(this.size)

    }

    }

    };newVue({

    el:"#app",

    components:{

    father: father

    }

    })

    子修改父值

    3、插槽:用于组件复用

    ContractedBlock.gif

    ExpandedBlockStart.gif

    首页

    免费课程

    轻课

    智能题库

    学位课程

    template: `

    `

    });newVue({

    el:"#app",

    })

    插槽

    四、生命周期

    1、beforeCreate:在Vue实例被创建之前,此时页面已加载完成,但是还没有Vue实例。

    2、created:在Vue实例创建之后,此时Vue实例已经创建,数据、函数等已经创建完成,但是还没有渲染页面,没有el。

    3、beforeMount:在挂载之前,此时已经找到了要渲染的标签,el中已经有了这个标签,但是还没有加载数据。

    4、mounted:在挂载之后,此时页面已被渲染完毕。

    5、beforeUpdate:在状态更新之前,data中的数据已被更新,但页面中的数据还没更新。

    6、updated:在状态更新之后,data和页面中的数据都已更新。

    7、beforeDestroy、destroyed

    8、activated、deactivated:用标签将某个组件包裹起来,这样这个组件的切换就只是隐藏和显示,不再是直接remove,保证了切换效率,但是同时让上面的八种声明周期方法都失效,只能使用activated和deactivated。

    五、VueRouter

    1、基本使用

    首页

    登陆

    展开全文
  • 我用到的Python的flask框架和vue来相互配合来做的web,这里我先说说Python的flask框架Python的flaskPython的flask框架是一种轻量级的web框架,适合用于轻量级的web应用,而且简单好学。首先是安装flask框架,在...

    前言

    有朋友问到在web中vue和Python是怎么交互的,我这里大概就写一写了,虽然可能表述不太规范,但希望能够帮到大家。

    我用到的Python的flask框架和vue来相互配合来做的web,这里我先说说Python的flask框架

    Python的flask

    Python的flask框架是一种轻量级的web框架,适合用于轻量级的web应用,而且简单好学。

    首先是安装flask框架,在命令行中输入

    pip install flask

    在这里创建一个run.py 文件,然后通过Python引入flask框架

    from flask import Flask
    app = Flask(__name__)
    # 这里默认的是get请求方式
    @app.route('/hello')
    def hello_world():
    #这里面就是你想要返回给前端的值, 切记,这里只能返回字符串,如果是个json数据,你的通过json.dumps(你的json数据)
     return 'Hello World!'
    
    if __name__ == '__main__':
        # 这里host是你的后端地址,这里写0.0.0.0, 表示的是这个接口在任何服务器上都可以被访问的到,只需要前端访问该服务器地址就可以的,
        # 当然你也可以写死,如222.222.222.222, 那么前端只能访问222.222.222.222, port是该接口的端口号,
        # debug = True ,表示的是,调试模式,每次修改代码后不用重新启动服务
        app.run(host='0.0.0.0', port=80, debug=True)

    这个就是一个简单的服务写好的,这里只需要在命令行中 python run.py 就可以启动了

    当然这是一个简单的服务,如果在项目中,你会有n多个接口,当然也不能写在这一个文件,所以就可以用到另外一个框架bluePrint

    bluePrint 我的理解是,他是一个Python的接口管理工具,说白了就是将多个接口分类管理,如登陆、注册的接口放在一个py文件里,将获取数据列表放在一个py文件里。。。。。。对就是这个意思。这样可以减轻服务端的压力。

    这是我看的一个BluePrint的一个解释https://www.cnblogs.com/wf-skylark/p/9306789.html 你们可以先理解一下,我有空了,分享一下Blueprint具体如何来布, 哈哈哈。

    前端vue的配置

    在这里如果你用的vue-cli创建的项目的话,在config的文件目录下的index.js文件中,中的ProxyTable中配置。

    34e54580c8560c316bcbcbe6b2d91c8c.png

    0bf61c3f21d29e40bd825ae5d2e601ef.png
    当然这个是没有配好的

    b2e8dae61b03473e75ba0d73db785389.png
    这个是配好的

    这里target: 就是后端服务的地址加端口号,刚才说过了,后端是0.0.0.0, 那么这里千万不能写0.0.0.0, 应该写的是后端服务自己所在的地址,

    changeOrigin: true, 表示可跨域的

    这里webpack算是配完了,然后看看具体前端接口的写法,如果你安装的是axios,

    axios的安装和引入就不多说了,直接看接口

    getdata(){
                this.axios.get('/api/hello').then((response)=>{
                    console.log(response.data)
                }).catch((response)=>{
                    console.log(response)
                })
            }
    

    这里前后端交互就算写完了, 如果有问题望指正。

    哈哈,写的不好 就这样了

    展开全文
  • Python 28 Vue框架

    2019-09-27 15:51:49
    一、基本使用 <div id="odiv">{{ greeting }}</div> ...script src="./static/vue.min.js"></script> <script> let vm = new Vue({ el: "#odiv", data: {...

    一、基本使用

    <div id="odiv">{{ greeting }}</div>
    
    <script src="./static/vue.min.js"></script>
    <script>
        let vm = new Vue({
            el: "#odiv",
            data: {
                greeting: "hello world",
            }
        })
    </script>

    二、常用指令

    1、v-text、v-html

    <div id="odiv" v-text="greeting"></div>
    <div id="odiv" v-html="greeting"></div>
    greeting: "<h1>hello world</h1>"

    2、v-for:循环创建标签

    <div id="odiv" v-for="num in yin">{{ num }}</div>
    <div id="odiv" v-for="student in students">{{ student.name }}</div>
    
    yin: [1, 2, 3]
    students: [{name: "yin"}, {name: "wen"}, {name: "jie"}]

    3、v-if、v-show

    v-if是先append多个标签,如果不符合条件再remove,这样来回切换的效率较低。

    v-show是给不符合条件的标签加上display=none,效率更高一些。

    <div v-if="word == 'xxx'">有</div>
    <div v-else-if="word == 'xx'">还是</div>
    <div v-else>没有</div>
    <div v-show="isShow">你好</div>

    4、v-bind:绑定属性

    <div v-bind:href="path">点击</div>
    <div v-bind:class="{active:isActive}">有</div>
    <div v-bind:class="[attr]">有</div>
    
    isActive:true,
    attr: "active"

    5、v-on:绑定事件

    <div v-on:click="change">点击</div>  // 可以简写成@click

    methods:{
    change:function(){xxx}
    }

    6、v-model:获取用户输入

        <div id="app">
            <input type="text" v-model="name"/>
    
            <input type="checkbox" value="男" v-model="genders"/>
            <input type="checkbox" value="女" v-model="genders"/>
    
            <select v-model="girlfriends">
                <option>康抻</option>
                <option>鞠莹莹</option>
                <option>嘉琪</option>
            </select>
    
            <textarea></textarea>
    
            <hr>
            {{ name }}
            {{ genders }}
            {{ girlfriends }}
        </div>
    
        <script>
            // 数据模板引擎
            // v-开头的指令是帮助我们渲染数据用的
            let vm = new Vue({
                el: "#app",
                data: {
                    name: "juyingying",
                    genders: [],
                    girlfriends: []
                },
            })
        </script>
    View Code

    7、计算属性:对数据进行加工操作

    <input v-model="a">
    <input v-model="b">
    <input v-model="c">
    <div>{{ total }}</div>
    
    data:{a:1,b:2,c:3},
    computed:{
        total: function(){
           return this.a + this.b + this.c
       }
    }

    8、侦听器:当数据发生改变时触发

      data: {
        question: '',
        answer: 'I cannot give you an answer until you ask a question!'
      },
      watch: {
        // 如果 `question` 发生改变,这个函数就会运行
        question: function (newQuestion, oldQuestion) {
          this.answer = 'Waiting for you to stop typing...'
          this.debouncedGetAnswer()
        }
      },

    9、指令修饰符:对用户输入的数据加工

    v-model.number="xx"  // 将输入的数据改为数值类型
    v-model.trim="xx"  // 将输入的数据两端的空白去除
    v-model.lazy="xx"  // 在失去焦点时才更新数据

    10、获取DOM元素

    <div id="app">
        <div ref="t" v-text="greeting"></div>
        <button v-on:click="changeColor">点击变红</button>
    </div>
    
    <script src="./static/vue.min.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                greeting: "hello world",
            },
            methods:{
                changeColor:function(){
                    this.$refs.t.style.color = "red";
                }
            }
        })
    </script>

    11、自定义指令

    Vue.directive("pos", function(el, bindding){  // 第一个参数是指令名称,第二个参数是一个函数,其中参数1是绑定的标签,参数2是传入的数据
        if (bindding.value=true){
            el.style.position = "fixed";
            el.style.right = 0;
            el.style.bottom = 0;
        }
    })

     

    三、组件

    1、全局组件和局部组件

    全局组件就是定义之后不用在Vue对象中注册,可以并且只可以在html中使用的。局部组件必须在父组件中注册,但是可以在任意的组件中使用。

    <div id="app"><Box></Box></div>
    
    <script>
        Vue.component("Box",{
            template: `<button v-on:click="times++">你点击了{{ times }}次</button>`,
            data(){
                return {
                    times: 0,
                }
            }
        });
    
        new Vue({
            el: "#app",
        })
    全局组件
    <div id="app"><Box></Box></div>
    
    <script>
        let Box = {
            template:`<button v-on:click="times++">你点击了{{ times }}次</button>`,
            data(){
                return {
                    times: 0,
                }
            }
        };
    
        new Vue({
            el: "#app",
            components:{
                Box:Box,
            }
        })
    局部组件

     2、父子组件通信

    // 子组件
    let son = {
        template: `
            <div>{{ fdata }}</div>
        `,
        props: ["fdata", ]
    }
    
    // 父组件
    let father = {
        template: `
            <son fdata=_fData_><son>
            <div></div>
        `,
        data(){
            return {
                fData: 0
            }
        },
        components:{
            son: son,
        }
    }
    父向子传值

    如果在子组件中想要监听这个值的变化可以使用侦听器

    <div id="app"><father></father></div>
    
    <script>
        let son = {
            template:`<button v-on:click="sonClick">点击变大</button>`,
            methods:{
                sonClick(){
                    this.$emit("sonClick", 1)
                }
            }
        };
    
        let father = {
            template: `
                <div>
                    <div v-bind:style="{ fontSize:size + 'px' }">字体大小</div>
                    <son v-on:sonClick="changeSize"></son>
                </div>
            `,
            data(){
                return {
                    size: 10
                }
            },
            components:{
                son: son,
            },
            methods:{
                changeSize(num){
                    console.log(num);
                    this.size += num;
                    console.log(this.size)
                }
            }
        };
    
        new Vue({
            el: "#app",
            components:{
                father: father
            }
        })
    子修改父值

    3、插槽:用于组件复用

    <body>
        <div id="app">
            <global-component>首页</global-component>
            <global-component>免费课程</global-component>
            <global-component>轻课</global-component>
            <global-component>智能题库</global-component>
            <global-component>学位课程</global-component>
        </div>
    <script>
        Vue.component("global-component", {
            template: `
                <div class="box"><slot></slot></div>
            `
        });
    
        new Vue({
            el: "#app",
        })
    </script>
    插槽

     

    四、生命周期

    1、beforeCreate:在Vue实例被创建之前,此时页面已加载完成,但是还没有Vue实例。

    2、created:在Vue实例创建之后,此时Vue实例已经创建,数据、函数等已经创建完成,但是还没有渲染页面,没有el。

    3、beforeMount:在挂载之前,此时已经找到了要渲染的标签,el中已经有了这个标签,但是还没有加载数据。

    4、mounted:在挂载之后,此时页面已被渲染完毕。

    5、beforeUpdate:在状态更新之前,data中的数据已被更新,但页面中的数据还没更新。

    6、updated:在状态更新之后,data和页面中的数据都已更新。

    7、beforeDestroy、destroyed

    8、activated、deactivated:用<keep-alive></keep-alive>标签将某个组件包裹起来,这样这个组件的切换就只是隐藏和显示,不再是直接remove,保证了切换效率,但是同时让上面的八种声明周期方法都失效,只能使用activated和deactivated。

     

    五、VueRouter

    1、基本使用

    <div id="app">
        <!-- router-link会被渲染成a标签,to会被渲染成href -->
        <router-link to="/">首页</router-link>
        <router-link to="/login">登陆</router-link>
        <!-- 显示组件 -->
        <router-view></router-view>
    </div>
    
    <script src="./static/vue.min.js"></script>
    <script src="./static/vue-router.js"></script>
    <script>
        // 1、使用VueRouter
        Vue.use(VueRouter);
    
        // 2、定义路由组件
        let home = {
            template: `<div>这是首页</div>`
        };
    
        let login = {
            template: `<div>这是登陆页面</div>`
        };
    
        // 3、定义路由关系
        routes = [
            {path: "/", component: home},
            {path: "/login", component: login}
        ];
    
        // 4、实例化一个router对象
        let router = new VueRouter({
            routes: routes
        });
    
        // 5、将router和Vue挂载
        new Vue({
            el: "#app",
            router: router
        })
    
    </script>
    基本使用

    在其他地方想点击跳转,可以:

    this.$router.push({name: "xx", params: {xx: "xx"}})

    2、路由命名

    <router-link :to="{ name:'home' }">首页</router-link>
    <router-link :to="{ name:'login' }">登陆</router-link>
    routes = [
        {path: "/", component: home, name: "home"},
        {path: "/login", component: login, name: "login"}
    ];

    3、路由传参

    用 :id表示需要传递params,构成路由的一部分

    什么都不加表示需要传递query,构成?xx=xx的数据

        let userParams = {
            template: `<div>这是用户{{ $route.params.id }}</div>`
        };
    
        let userQuery = {
            template: `<div>这是用户{{ $route.query.id }}</div>`,
        };
    
        routes = [
            {path: "/user/:id", component: userParams, name: "userParams"},
            {path: "/user/", component: userQuery, name: "userQuery"}
        ];
    JS
    <div id="app">
        <router-link :to="{ name:'userParams', params: {id: '1'} }">用户</router-link>
        <router-link :to="{ name:'userQuery', query:{id:1} }">用户</router-link>
        <!-- 显示组件 -->
        <router-view></router-view>
    </div>
    html

    4、路由重定向

    routes: [
        { path:"/a", redirect:"/b" },
        { path:"/a", redirect:{name: 'b'} }
    ]

    5、路由嵌套

    6、路由钩子函数

    const router = new VueRouter({ ... })
    router.beforeEach((to, from, next) => {
      // ...
    })

    7、路由去掉井号

    let router = new VueRouter({
         mode: 'history',
    )}

     

    六、Node、spm、webpack

    1、Node.js

    Node.js就是JavaScript的运行环境,可以让js语言在没有浏览器的情况下直接在终端运行,变成像python一样的脚本语言。

    2、npm

    npm是JS的第三方库管理工具,安装Node.js后就默认安装了npm。

    npm安装包分为全局安装和局部安装,全局安装:npm install -g vue,局部安装:npm install vue --save

    # 初始化项目目录
    npm init -y
    
    # 下载包
    npm install -g xxxx
    npm install xxx --save
    
    # 卸载
    npm uninstall xxx
    
    # 更新
    npm update xxx

    3、webpack

     

    七、vue-cli

    vue-cli是帮我们快速搭建项目的脚手架工具

    # 1、全局安装vue-cli
    npm install -g @vue/cli  # 3版本安装方式
    
    # 2、在文件夹中创建项目
    npm init -y
    vue init webpack vue-demo
    
    # 3、切换到项目目录中,启动项目
    cd vue-demo
    npm run dev

    项目结构和使用:

     

    八、Vuex

    用来进行状态管理,提供一个公共的部分存放数据,各个组件都能访问。

    import Vue from "vue"
    import Vuex from "vuex"
    
    Vue.use(Vuex);
    
    export default new Vuex.Store({
       // 用来共享数据,this.$store.state.name
       state:{
           name: "yin"
       },
       // 对数据加工,this.$store.getters.new_name
       getters:{
           new_name: function(state){
              return state.name + "1"
           }
       },
      // 对数据修改, this.$store.commit("change_name", "xxx")
       mutations:{
           "change_name": function(state, data){
               state.name = data
           }
       },
    })
    store.js
    import Vue from 'vue'
    import App from './App'
    import router from './router'
    import store from './store'
    
    Vue.config.productionTip = false
    
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      router,
      store,
      components: { App },
      template: '<App/>'
    });
    main.js

     

    九、axios

    // 以后可以在组件中通过$axios来使用
    import axios from 'axios'
    Vue.prototype.$axios = axios
      mounted(){
    let that = this
    this.$axios.request({ url: "xxx", method: "get" }).then(function(data){ // 成功的回调 }).catch(function(data){ // 失败的回调 }) }

     

    十、打包发布

    1、修改打包后寻找静态文件的路径

    因为打包后产生的dist文件夹里面有一个index.html,一个static文件包,如果要找静态资源需要相对路径。

     

     注意:这里是在build{ }下修改而不是开头的那个

    2、执行打包命令

    npm run build

    3、将生成的dist部署到nginx

     

    转载于:https://www.cnblogs.com/yinwenjie/p/11282141.html

    展开全文
  • Python Day 79 Vue框架

    2019-09-23 20:48:52
    ##1、走进Vue #1、what -- 什么是Vue 渐进式 JavaScript ...三大主流框架之一:Angular React Vue 先进的前端设计模式:MVVM 可以完全脱离服务器端,以前端代码复用的方式渲染整个页面:组件化开发 #3、...

      ##1、走进Vue

    #1、what -- 什么是Vue
        渐进式 JavaScript 框架、可以独立完成前后端分离式web项目的JavaScript框架
    
    #2、why -- 为什么要学习Vue
    三大主流框架之一:Angular React Vue
    先进的前端设计模式:MVVM
    可以完全脱离服务器端,以前端代码复用的方式渲染整个页面:组件化开发
    
    #3、special -- 特点
    1)单页面 - 硬件要求低
    2)组件化开发
    3)数据驱动
    4)数据的双向绑定
    5)虚拟DOM
    6)轻量级
    
    #4、how -- 如何使用Vue
    - 开发版本:[vue.js](https://vuejs.org/js/vue.js)
    - 生产版本:[vue.min.js]
    <div id="app">
        {{ }}
    </div>
    <script src="js/vue.min.js"></script> //下载到本引入vue
    <script>
        new Vue({
            el: '#app'
        })
    </script>

       ##2、Vue实例

       ##2-1、el实例

    new Vue({
        el: '#app'
    })
    // 实例与页面挂载点一一对应
    // 一个页面中可以出现多个实例对应多个挂载点
    // 实例只操作挂载点内部内容

      ##2-2、data数据

    <div id='app'>
        {{ msg }}
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                msg: '数据',
            }
        })
        console.log(app.$data.msg);
        console.log(app.msg);
    </script>
    <!-- data为插件表达式中的变量提供数据 -->
    <!-- data中的数据可以通过Vue实例直接或间接访问-->

      ##2-3、methods 方法

    <style>
        .box { background-color: orange }
    </style>
    <div id='app'>
        <p class="box" v-on:click="pClick">测试</p>
        <p class="box" v-on:mouseover="pOver">测试</p>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            methods: {
                pClick () {
                    // 点击测试
                },
                pOver () {
                    // 悬浮测试
                }
            }
        })
    </script>
    <!-- 了解v-on:为事件绑定的指令 -->
    <!-- methods为事件提供实现体-->

      ##2-4、computed 计算属性

    <!DOCTYPEhtml><html><head><metacharset="utf-8"><title>监听多个变量</title></head><body><divid="app"><inputtype="text"v-model="a_val"><inputtype="text"v-model="b_val"><inputtype="text"v-model="c_val"><p>{{val_fn}}</p></div></body><scriptsrc="js/vue.js"></script><script>newVue({el:'#app',data:{a_val:'',b_val:'',c_val:'',},//computed内部书写方法-管理可以监听多个变量的方法//1)方法名可以直接作为变量被渲染,值为方法的返回值//2)在方法名被渲染后(在页面中使用了),方法内部的所有变量都会被监听//3)computed用来解决一个变量值依赖一个或多个变量值computed:{val_fn(){//this.a_val;//this.b_val;//this.c_val;console.log('该方法被调用了');returnthis.a_val+this.b_val+this.c_val;}}})</script></html>
    案例1
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            <p>
                姓:<input type="text" v-model="last_name">
            </p>
             <p>
                名:<input type="text" v-model="first_name">
            </p>
            <p>
                姓名:{{ full_name }}
            </p>
        </div>
    </body>
    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                last_name: '',
                first_name: '',
            },
            computed: {
                full_name () {
                    return this.last_name + ' ' + this.first_name;
                }
            }
        })
    </script>
    </html>
    案例2

      ##2-5、watch 监听属性

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>监听属性</title>
    </head>
    <body>
        <div id="app">
            <p>
                姓名:<input type="text" v-model="full_name">
            </p>
            <p>
                姓:<input type="text" v-model="last_name">
            </p>
             <p>
                名:<input type="text" v-model="first_name">
            </p>
        </div>
    </body>
    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                full_name: '',
                last_name: '',
                first_name: '',
            },
            // watch内部书写方法 - 管理 监听绑定的属性(提前要存在) 的方法
            // 1)方法名 被监听的变量名(属性)
            // 2) 在方法名被渲染后,方法名代表的属性值改变,绑定的方法就会被调用
            // 3)watch用来解决多个变量值依赖一个变量值
            watch: {
                full_name () {
                    console.log('被调用了');
                    // full_name变量值改变,要完成的任何逻辑都可以书写在此方法中
                    let name = this.full_name.split(' ');
                    this.last_name = name[0];
                    this.first_name = name[1];
                }
            }
        })
    </script>
    </html>
    View Code

      ##2-6、delimiters 分隔符

    <div id='app'>
        ${ msg } //修改后的分隔符
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                msg: 'message'
            },
            delimiters: ['${', '}']  
        })
    </script>

      ##3、生命周期钩子

     

    表示一个vue实例从创建到销毁的这个过程,将这个过程的一些时间节点赋予了对应的钩子函数
    
    钩子函数: 满足特点条件被回调的方法
    
    #重点掌握两个方法
        created
        mounted
    
    #vue api 链接  生命周期
    https://cn.vuejs.org/v2/api/#%E9%80%89%E9%A1%B9-%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E9%92%A9%E5%AD%90  
    
    
    #生命周期图示: 可直接查看官网
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>vue组件的生命周期钩子</title>
    </head>
    <body>
        <div id="app">
            <h1>一个vue组件从创建到销毁整个生命周期过程中一些时间节点回调的方法</h1>
            <local-tag></local-tag>
        </div>
    </body>
    <script src="js/vue.js"></script>
    <script>
        let localTag = {
            template: `
            <div>
                <h2 @click="btnClick">{{ msg }}</h2>
            </div>
            `,
            data () {
                return {
                    msg: '局部组件',
                    x: 'x',
                    y: 'y'
                }
            },
            methods: {
                btnClick () {
                    console.log(this.msg)
                },
                zzz() {}
            },
            beforeCreate () {
                console.log('组件开始创建,数据和事件都为创建');
                console.log(this.msg);
                console.log(this.btnClick);
                console.log(this.$data);
            },
            pppp: [1, 2, 3],
            created () {
                console.log('组件已经创建完毕,数据与事件都准备就绪');
                console.log(this.msg);
                console.log(this.btnClick);
                console.log(this.$data);
                console.log(this.$options.methods);
                console.log(this.$options.pppp);
            },
        };
    
        new Vue({
            el: '#app',
            components: {
                localTag,
            }
        })
    </script>
    </html>
    View Code

      ##4、Vue指令

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>文本指令</title>
    </head>
    <body>
        <div id="app">
            <!--1、插值表达式:在内部直接写变量或变量表达式-->
            <p>{{ msg }}</p>
            <p>{{ (num + 1 - 3) / 2 }}</p>
    
            <!--2、v-text v-html v-once 三个文本指令 -->
            <!--v-text:纯文本-->
            <p v-text="msg"></p>
            <!--v-html:可以解析标签-->
            <p v-html="'<b>加粗文本</b>'"></p>
            <p v-html="htmlMSG" @click="changeMsg"></p>
            <!--v-once:插值表达式渲染文本,once来限制文本不可修改-->
            <!--插值表达式中一个变量被限制,整个结果都被限制-->
            <p v-once="htmlMSG">{{ htmlMSG + msg }}</p>
        </div>
    </body>
    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                msg: 'message',
                num: 10,
                htmlMSG: '<b>加粗文本</b>'
            },
            methods: {
                changeMsg: function () {
                   this.htmlMSG = '<i>加粗文本</i>';
                   this.msg = '11111111111111';
                }
            }
        })
    </script>
    </html>
    文本指令
    <style type="text/css">
        [v-cloak] { display: none; }
    </style>
    <div id="app" v-cloak>
        {{ msg }}
    </div>
    <script src="js/vue.min.js"></script>
    <script type="text/javascript">
        new Vue({
            el: "#app",
            data: {
                msg: "message"
            }
        })
    </script>
    <!-- 避免页面闪烁-->
    斗篷指令解决闪烁问题
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>事件指令</title>
        <style>
            [aaa*='2'] {
                color: red;
            }
            [v-cloak] {
                display: none;
            }
        </style>
    </head>
    <body>
        <div id="app" v-cloak aaa="123">
            <!-- v-on指令: 1)明确事件名 2)明确事件函数  v-on:事件名="事件函数"  -->
    
            <!--1、基础的事件绑定-->
            <p v-on:click="clickAction">单击</p>
            <p v-on:dblclick="dblclickAction">双击</p>
    
            <!--2、绑定事件并传参-->
            <ul>
                <li v-on:click="liAction(0)">{{ li1 }}</li>
                <li v-on:click="liAction(1)">222</li>
                <li v-on:click="liAction(2)">333</li>
            </ul>
    
            <!--3、传递事件对象-->
            <p v-on:click="sysAction1">不传自定义参数</p>
            <p v-on:click="sysAction2(888, $event)">传自定义参数</p>
    
            <!--4、v-on: 可以简写为 @ -->
            <p @click="clickAction">单击</p>
        </div>
    </body>
    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                  li1: '111'
            },
            methods: {
                clickAction: function () {
                    alert('点击')
                },
                dblclickAction () {
                    alert('双击')
                },
                liAction (index) {
                    // alert('li被点击了');
                    // alert(this.li1);
                    alert(index);
                },
                sysAction1 (ev) {
                    console.log(ev)
                },
                sysAction2 (num, ev) {
                    console.log(num);
                    console.log(ev);
                }
    
            }
    
        })
    </script>
    </html>
    事件指令
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>属性指令</title>
        <style>
            .box {
                width: 200px;
                height: 200px;
                background-color: orange;
            }
            .wrap {
                width: 100px;
                height: 100px;
                background-color: red;
            }
    
            .kiss {
                width: 150px;
                height: 150px;
                background-color: cyan;
            }
            .x {
                width: 300px;
            }
            .y {
                height: 300px;
            }
            .z {
                background-color: brown;
            }
        </style>
    </head>
    <body>
        <div id="app">
    
            <!-- v-bind属性指令 :属性名="属性变量",v-bind: 可以简写为: -->
            <!--eg: v-bind:class='myClass' | v-bind:style='myStyle' | v-bind:aaa='myAAA' -->
            <div class="box" v-bind:style="myStyle" @click="changeColor('pink')"></div>
    
            <!--1、操作单个样式:w变量的值就是为属性宽提供数据的-->
            <div class="box" v-bind:style="{'width': w}" @click="changeWidth"></div>
    
            <!--2、操作多个样式: more_style是一个对象变量,可以赋值多个key:value样式-->
            <div class="box" v-bind:style="more_style" @click="changeStyle"></div>
    
            <!--3、v-bind: 可以简写为 :,可以绑定所有系统和自定义属性,属性一旦绑定,后方就是变量 -->
            <div :aaa="AAA">简写v-bind</div>
    
            <!--4、操作单个类名-->
            <!--直接赋值:c1就是变量,变量的值就是类名-->
            <div :class="c1" @click="changeClass"></div>
            <!--布尔切换:该div有一个kiss类名,kiss_able的true或false决定kiss是否生效-->
            <div :class="{kiss: kiss_able}"></div>
    
            <!--5、操作多个类名: [变量1, ..., 变量n] 每个变量的值都是该标签的类名 -->
            <div :class="[x, y, {z: is_z}]"></div>
    
        </div>
    </body>
    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                myStyle: 'background-color: red;',
                w: '400px',
                more_style: {
                    width: '100px',
                    height: '100px',
                    borderRadius: '50%',
                    backgroundColor: 'cyan'
                },
                AAA: 'BBB',
                c1: 'wrap',
                kiss_able: true,
                x: 'x',
                y: 'y',
                // z: 'z',
                is_z: true
            },
            methods: {
                changeColor (color) {
                    this.myStyle = 'background-color: ' + color + ';'
                },
                changeWidth () {
                    this.w = '500px'
                },
                changeStyle () {
                    this.more_style.borderRadius = '30%'
    
                    // this.more_style = {
                    //     width: '200px',
                    //     height: '200px',
                    //     borderRadius: '50%',
                    //     backgroundColor: 'tan'
                    // }
                },
                changeClass () {
                    if (this.c1 === 'box') {
                        this.c1 = 'wrap';
                    } else {
                        this.c1 = 'box';
                    }
    
                    // 布尔类型值来回切换
                    this.kiss_able = !this.kiss_able;
                }
            }
        })
    </script>
    </html>
    属性指令
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            <!-- v-model 表单指令 v-model="变量"  变量给value属性提供值 -->
    
            <!--1、数据的双向绑定-->
            <input type="text" v-model="val">
            <input type="text" v-model="val">
            <p>{{ val }}</p>
    
            <form action="">
                <!--2、普通输入框: 直接绑定变量即可 -->
                <input type="password" v-model="val">
    
                <!--3、单选框-->
                <!--radio_val的值是多个单选框中一个的value值,代表该单选框默认选中-->
                <p>
                    <label for="male">男</label>
                    <input id="male" type="radio" value="male" v-model="radio_val" name="sex">
                    <label for="female">女</label>
                    <input id="female" type="radio" value="female" v-model="radio_val" name="sex">
                    <button @click="alertValue">单选框提交给后台的value</button>
                    <span>{{ radio_val + '被选中' }}</span>
                </p>
    
                <!--4、独立使用的复选框 -->
                <!--sure_val的值为true|false,决定该单个复选框是否选中-->
                <p>
                    <input type="checkbox" name="sure" value="同意" v-model="sure_val">
                    <span>{{ sure_val }}</span>
                </p>
                request.GET.get('sure', None)
                <!--5、复选框-->
                <!--hobby_val的值是数组,里面用来存放复选框所有选项的值,值存在代表该选框选中-->
                <p><input type="checkbox" value="male" name="hobby" v-model="hobby_val"><input type="checkbox" value="female" name="hobby" v-model="hobby_val">
                    哇塞<input type="checkbox" value="?" name="hobby" v-model="hobby_val">
                    <span>{{ hobby_val }}</span>
                </p>
    
                <p>
                    <input type="submit">
                </p>
            </form>
    
        </div>
    </body>
    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                val: '',
                radio_val: 'male',
                sure_val: true,
                hobby_val: ['?', 'male']
            },
            methods: {
                alertValue () {
                    alert(this.radio_val)
                }
            }
        })
    </script>
    </html>
    表单指令
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            [v-cloak] {
                display: none;
            }
            .box {
                width: 200px;
                height: 200px;
            }
            .b1 {background-color: orange;}
            .b2 {background-color: cyan;}
    
            .r {background-color: red;}
            .b {background-color: blue;}
            .g {background-color: green;}
        </style>
    </head>
    <body>
        <div id="app" v-cloak>
            <!-- v-if | v-show 条件指令: v-if="变量" | v-show="变量" -->
    
            <!--1、v-if | v-show比较:两者绑定的变量值都是 true|false-->
            <p>
                <button @click="toggleAction(true)">显示</button>
                <button @click="toggleAction(false)">隐藏</button>
            </p>
            <!--v-if在隐藏时,不被渲染 | v-show在隐藏时,采用display: none存在-->
            <div class="box b1" v-if="is_show"></div>
            <div class="box b2" v-show="is_show"></div>
    
            <!--2、v-if、v-else-if、v-else 分支家族 -->
            <p>
                <button @click="toggleShow('red')">红</button>
                <button @click="toggleShow('blue')">蓝</button>
                <button @click="toggleShow('green')">绿</button>
            </p>
            <div class="box r" v-if="color == 'red'"></div>
            <div class="box b" v-else-if="color == 'blue'"></div>
            <div class="box g" v-else></div>
        </div>
    </body>
    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                is_show: false,
                color: 'red'
            },
            methods: {
                toggleAction(is_show) {
                    this.is_show = is_show;
                },
                toggleShow(color) {
                    this.color = color;
                }
            }
        })
    </script>
    </html>
    条件指令
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>循环指令</title>
    </head>
    <body>
        <div id="app">
            <div>{{ arr }}</div>
            <hr>
            <ul>
                <li>{{ arr[0] }}</li>
                <li>{{ arr[1] }}</li>
                <li>{{ arr[2] }}</li>
            </ul>
            <hr>
            <!-- v-for 循环指令: v-for="ele in 容器变量" -->
    
            <!--1、array的循环-->
            <ul>
                <li v-for="s in arr">{{ s }}</li>
            </ul>
            <hr>
            <!--key属性是vue的属性,表示为改标签在内存中建立缓存的依据-->
            <ul>
                <li v-for="(s, i) in arr" :key="s" b="b">第{{ i }}个:{{ s }}</li>
            </ul>
            <hr>
            <!--2、对象的循环-->
            <ul>
                <li v-for="v in person">{{ v }}</li>
            </ul>
            <hr>
            <ul>
                <li v-for="(v, k) in person">{{ k }}:{{ v }}</li>
            </ul>
            <hr>
            <ul>
                <li v-for="(v, k, i) in person">{{ k }}:{{ v }}:{{ i }}</li>
            </ul>
            <hr>
    
            <!--name: * | sex:*-->
            <!--name: * | sex:*-->
            <!--name: * | sex:*-->
    
            <p v-for="stu in stus">
                <span v-for="(v, k, i) in stu">
                    <b v-if="i != 0"> | </b>
                    <b>{{ k }}:{{ v }}</b>
                </span>
            </p>
    
        </div>
    </body>
    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                arr: ['aaa', 'bbb', 'ccc'],
                person: {
                    'name': 'Bob',
                    'age': 18,
                    'sex': ''
                },
                stus: [
                    {
                        'name': 'Alex',
                        'sex': '哇塞'
                    },
                    {
                        'name': 'Egon',
                        'sex': '哇哦'
                    },
                    {
                        'name': 'Jason',
                        'sex': '我去'
                    }
                ]
            }
        })
    </script>
    </html>
    循环指令
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>todolist</title>
        <style>
            li:hover {
                cursor: pointer;
                color: red;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <input type="text" v-model="msg_val">
            <button @click="sendMsg">留言</button>
    
            <ul>
                <li v-for="(msg, i) in msgs" @click="deleteMsg(i)">{{ msg }}</li>
            </ul>
        </div>
    
    </body>
    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                // msgs: ['第一条留言', '第二条留言'],
                msgs: localStorage.msgs ? localStorage.msgs.split(',') : [],
                msg_val: '',
            },
            methods: {
                sendMsg () {
                    // 1)数据为空直接结束
                    if (!this.msg_val) return;
    
                    // 2)数据添加到留言数组中
                    // this.msgs.push(this.msg_val);  // 尾增
                    this.msgs.unshift(this.msg_val);  // 首增
    
                    // 数据同步到前台数据库
                    localStorage.msgs = this.msgs;
    
                    // 3)清空输入框
                    this.msg_val = '';
                },
                deleteMsg (index) {
                    // console.log(index);
                    this.msgs.splice(index, 1);
                    // 数据同步到前台数据库
                    localStorage.msgs = this.msgs;
                }
            }
        })
    </script>
    </html>
    todolist案例
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>路飞导航案例</title>
        <style>
            body {
                margin: 0;
                height: 3000px;
            }
            ul {
                margin: 0;
                padding: 0;
                list-style: none;
            }
        </style>
        <style>
            .footer {
                width: 100%;
                height: 120px;
                background-color: rgba(0, 0, 0, 0.8);
            }
        </style>
        <style>
            .header {
                width: 100%;
                background-color: #ccc;
                position: fixed;
            }
            .header-slogan {
                width: 1200px;
                font: normal 14px/36px '微软雅黑';
                color: #333;
                margin: 0 auto;
            }
            .header-nav {
                width: 1200px;
                margin: 0 auto;
                /*background-color: orange;*/
            }
            .header-nav:after {
                content: "";
                display: block;
                clear: both;
            }
            .header-logo, .header-menu {
                float: left;
            }
            .header-owner {
                float: right;
            }
            .header-logo {
                width: 118px;
                height: 36px;
                background: url("img/header-logo.svg") no-repeat;
            }
            .header-menu {
                margin-left: 40px;
            }
            .header-menu li {
                float: left;
                margin-top: 26px;
                cursor: pointer;
                margin-right: 20px;
            }
            .header-menu li:hover {
                color: #444;
                padding-bottom: 5px;
                border-bottom: 2px solid #444;
            }
            .header-owner {
                padding-top: 26px;
            }
            .active {
                color: #444;
                padding-bottom: 5px;
                border-bottom: 2px solid #444;
            }
        </style>
        <style>
            .body-box {
                width: 1200px;
                height: 2000px;
                margin: 0 auto;
            }
            .box-normal-course { background-color: pink }
            .box-light-course { background-color: deeppink }
            .box-super-course { background-color: hotpink }
        </style>
    </head>
    <body>
        <div id="app">
            <div class="header">
                <div class="header-slogan">老男孩IT教育集团 | 帮助有志向的年轻人通过努力学习获得体面的工作和生活!</div>
                <div class="header-nav">
                    <h1 class="header-logo"></h1>
                    <ul class="header-menu">
                        <li :class="{active: page == 'normal'}" @click="togglePage('normal')">免费课</li>
                        <li :class="{active: page == 'light'}" @click="togglePage('light')">轻课</li>
                        <li :class="{active: page == 'super'}" @click="togglePage('super')">学位课</li>
                    </ul>
                    <div class="header-owner">
                        <div v-if="is_logout">
                            <span>登陆</span> | <span>注册</span>
                        </div>
                        <div v-else>
                            <span>Owen</span> | <span>个人中心</span>
                        </div>
                    </div>
                </div>
            </div>
    
            <div class="body">
                <div class="body-box box-normal-course" v-if="page == 'normal'"></div>
                <div class="body-box box-light-course" v-else-if="page == 'light'"></div>
                <div class="body-box box-super-course" v-else></div>
            </div>
    
            <div class="footer"></div>
        </div>
    </body>
    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                is_logout: true,
                page: 'normal'
            },
            methods: {
                togglePage(page) {
                    this.page = page;
                }
            }
        })
    </script>
    </html>
    路飞学成案例

      ##5、前端数据库

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>前台数据库</title>
    </head>
    <body>
        <h1>前台数据库</h1>
    </body>
    <script>
        // window.localStorage  // 永久存储仓库
        // window.sessionStorage  // 临时存储仓库
    
        // 存,存完注释
        // localStorage['name'] = 'Owen'
        // 取
        console.log(localStorage.name);
    
        // 存,存完注释
        // sessionStorage.age = 18;
        // 取
        console.log(['age']);
    
        // localStorage.msgs = []
    
        // 清空
        localStorage.clear();
        localStorage.clear();
    
        // localStorage.arr = [1, 2, 3];
        // localStorage.obj = {'1': 1};
    
    </script>
    </html>
    前端数据库

      ##6、组件

    #组件规则
    每一个组件都是一个vue实例
    每个组件均具有自身的模板template,根组件的模板就是挂载点
    每个组件模板只能拥有一个根标签
    
    子组件的数据具有作用域,以达到组件的复用

      ##6-1、根组件

    <div id="app">
        <h1>{{ msg }}</h1>
    </div>
    <script type="text/javascript">
        // 通过new Vue创建的实例就是根组件(实例与组件一一对应,一个实例就是一个组件)
        // 每个组件组件均拥有模板,template
        var app = new Vue({
            // 根组件的模板就是挂载点
            el: "#app",
            data : {
                msg: "根组件"
            },
            // 模板: 由""包裹的html代码块,出现在组件的内部,赋值给组件的$template变量
            // 显式书写模块,就会替换挂载点,但根组件必须拥有挂载点
            template: "<div>显式模板</div>"
        })
        // app.$template
    </script>
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <h1 id="app">
            {{ msg }}
        </h1>
        <div id="main">
            {{ msg }}
        </div>
    </body>
    <script src="js/vue.js"></script>
    <script>
        // 1、new Vue创建的是vue实例,一个实例就是一个vue组件,new出了的实例称之为根组件
        // 注:在实际开发中一个页面只有一个根组件
        // 2、每个组件均由 html模板 css样式 js逻辑 组成
        //      html模板: template,根组件的模板就采用挂载点即可,无需创建自身template
        //      注:挂载点是必须的(作为虚拟DOM渲染替换的依据),挂载点可以读取,作为根组件的模板,使用根组件无需书写template
        // 3、根组件内部可以注册使用n个子组件,子组件必须拥有自己的 html模板 css样式 js逻辑
        //      如果创建子组件 | 如何使用子组件 | 父子组件间的通信
        let app = new Vue({
            el: '#app',
            data: {
                msg: 'app的msg',
                c: 'red'
            },
            // template: '<ul>{{ msg }}</ul>',
            template: `<h1 id="app" :style="{color: c}" @click="action">
    {{ msg }}
    </h1>
    `,
            methods: {
                action () {
                    alert(this.msg)
                }
            }
        });
        let main = new Vue({
            el: '#main',
            data: {
                msg: 'main的msg'
            }
        });
        // 知识点:利用原生js完成两个组件的交互
        // 获取组件的数据
        // console.log(app.msg);
        // 修改组件的数据
        // app.msg = '12345';
        main.msg = app.msg;
    
    </script>
    </html>
    根组件案例 总结

      ##6-2、局部组件

    <div id="app">
        <local-tag></local-tag>
        <local-tag></local-tag>
    </div>
    <script>
        var localTag = {
            data () {
                return {
                    count: 0
                }
            },
            template: '<button @click="btnAction">局部{{ count }}</button>',
            methods: {
                btnAction () {
                    this.count ++
                }
            }
        }
        new Vue({
            el: "#app",
            components: {
                'local-tag': localTag
            }
        })
    </script>
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>局部组件</title>
        <style>
            .box {
                width: 200px;
                text-align: center;
                border: 1px solid black;
                border-radius: 10px;
                overflow: hidden;
                float: left;
            }
            .box img {
                width: 100%;
            }
            .box p {
                margin: 0;
            }
            .box span:hover {
                cursor: pointer;
                color: orange;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <!--<div class="box">-->
                <!--<img src="http://a.hiphotos.baidu.com/image/h%3D300/sign=e543b919a151f3dedcb2bf64a4eff0ec/4610b912c8fcc3cebba8b8e09c45d688d53f20fc.jpg" alt="">-->
                <!--<p>野兽</p>-->
            <!--</div>-->
    
            <!--<box></box>-->
            <!--<box></box>-->
    
            <!--<box-tag></box-tag>-->
            <!--<box-tag></box-tag>-->
    
            <!--
            问题:数据 父组件 => 子组件
            父组件根据数组数据(box_data)渲染多个子组件,遍历得到的数据(box_obj)是渲染子组件的,
            如何将遍历的数据传递给子组件
            -->
            <box-tag v-for="box_obj in box_data"></box-tag>
        </div>
    </body>
    <script src="js/vue.js"></script>
    <script>
        // 后台的数据
        let data = [
                {
                    img_url: 'img/001.jpg',
                    img_title: '野兽1'
                },
                {
                    img_url: 'img/001.jpg',
                    img_title: '野兽2'
                },
                {
                    img_url: 'img/001.jpg',
                    img_title: '野兽3'
                }
            ];
    
    
        // 创建局部组件 => 在根组件中注册 => 解析{}中的vue语法 => 形成组件
        let box = {
            template: `
            <div class="box">
                <img src="img/001.jpg" alt="">
                <p>
                    <span @click="btnClick">点击了{{ num }}下</span>
                    <p>野兽</p>
                </p>
            </div>
            `,
            // data: {  // 错误的
            //     num: 0
            // },
            // data: function () {  // 每个复用的子组件都应该有自己的一套数据,所以要用一个局部作用域存储,保证数据的隔离性
            //     return {  // data的值还是字典,所以函数的返回值是字典即可
            //         num: 0
            //     }
            // },
            data () {
                return {
                    num: 0
                }
            },
            methods: {
                btnClick () {
                    // alert(123)
                    this.num += 1;
                }
            }
        };
    
        new Vue({
            el: '#app',
            components: {
                // box,  // key与value变量同名
                boxTag: box,  // js支持的驼峰命名法与html的-连接有语法对应
                // 'box-tag': box,
            },
            data: {
                box_data: data
            }
            // 伪代码:页面的data数据可以由后台提供,前台获取后赋值给 vue data成员中的变量,vue就可以渲染到页面中
            // $.ajax({
            //     success: function (data) {
            //         this.box_data = data
            //     }
            // })
        })
    </script>
    </html>
    局部组件案例

      ##6-3、全局组件

    <div id="app">
        <global-tag></global-tag>
        <global-tag></global-tag>
    </div>
    <script>
        Vue.component('global-tag', {
            data () {
                return {
                    count: 0
                }
            },
            template: '<button @click="btnAction">全局{{ count }}</button>',
            methods: {
                btnAction () {
                    this.count ++
                }
            }
        })
        new Vue({
            el: "#app"
        })
    </script>
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>全局组件</title>
    </head>
    <body>
        <div id="app">
            <!--<p-tag></p-tag>-->
            <!--<p-tag></p-tag>-->
    
            <g-tag></g-tag>
            <g-tag></g-tag>
        </div>
    </body>
    <script src="js/vue.js"></script>
    <script>
        let pTag = {
            template: `
            <p>
                <span @click="action">{{ num }}</span>
            </p>
            `,
            data () {
                return {
                    num: 0
                }
            },
            methods: {
                action() {
                    this.num++;
                }
            }
        };
    
        // 全局组件,通过 Vue.component('组件名', 组件对象主体);
        Vue.component('gTag', {
                template: `
                <p>
                    <span @click="action">{{ num }}</span>
                </p>
                `,
                data () {
                    return {
                        num: 0
                    }
                },
                methods: {
                    action() {
                        this.num++;
                    }
                }
            }
        );
    
        new Vue({
            el: '#app',
            components: {
                // pTag,
            }
        })
    </script>
    </html>
    全局组件案例

      ##6-4、父子组件

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>父子组件</title>
        <style>
            body, h1, h2 {
                margin: 0;
            }
        </style>
        <style>
            .header {
                height: 120px;
                background-color: orange;
            }
            .body {
                height: 800px;
                background-color: pink;
            }
            .footer {
                height: 180px;
                background-color: brown;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <view-tag v-if="page == 'tag'" @click="action"></view-tag>
            <view-tag-2 v-else-if="page == 'tag2'"></view-tag-2>
        </div>
    </body>
    <script src="js/vue.js"></script>
    <script>
        // 小组件
        let headerTag = {
            template: `
            <div class="header">
                <h1 style="text-align: center; line-height: 120px">头</h1>
            </div>
            `,
        };
    
        let footerTag = {
            template: `
            <div class="footer" >
                <h2 style="text-align: center; line-height: 180px">尾</h2>
            </div>
            `,
        };
    
        // 页面组件
        let viewTag = {
            template: `
            <div class="view-tag">
                <header-tag></header-tag>
                <div class="body" style="background-color: lawngreen"></div>
                <footer-tag></footer-tag>
            </div>
            `,
            components: {
                headerTag,
                footerTag,
            }
        };
    
        let viewTag2 = {
            template: `
            <div class="view-tag">
                <header-tag></header-tag>
                <div class="body" style="background-color: cyan"></div>
                <footer-tag></footer-tag>
            </div>
            `,
            components: {
                headerTag,
                footerTag,
            }
        };
    
        // 根组件
        new Vue({
            el: '#app',
            data: {
                // 问题:数据 子组件 => 父组件
                // page的值需要在父组件中修改,单击事件只能在子组件中触发
                // 子组件触发事件后将要修改的值传出给父组件,在父组件中完成数据的修改
                page: 'tag'
            },
            components: {
                viewTag,
                viewTag2,
            },
            methods: {
                action () {
                    alert('给组件标签绑定事件无法激活')
                }
            }
        })
    </script>
    </html>
    View Code

      ##6-5、数据父传子

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>父传子</title>
    </head>
    <body>
        <div id="app">
            <!--总结:
            1)父组件模板中写子组件标签
            2)父组件的数据绑定给子组件标签的自定义属性
            3)在子组件内部通过props拿到自定义属性
            4)使用自定义属性就可以获得父组件的数据
            -->
            <sub-tag :a="msg"></sub-tag>
        </div>
    </body>
    <script src="js/vue.js"></script>
    <script>
        let subTag = {
            // 子组件通过props实例成员获取自身自定义属性
            props: ['a'],
            template: `
            <div>
                <h1>{{ a }}</h1>
            </div>
            `
        };
    
        new Vue({
            el: '#app',
            data: {
                msg: '父级数据'
            },
            components: {
                subTag,
            }
        })
    </script>
    </html>
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>父传子案例</title>
        <style>
            .box {
                width: 200px;
                text-align: center;
                border: 1px solid black;
                border-radius: 10px;
                overflow: hidden;
                float: left;
            }
            .box img {
                width: 100%;
            }
            .box p {
                margin: 0;
            }
            .box span:hover {
                cursor: pointer;
                color: orange;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <box-tag v-for="box_obj in box_data" :box_obj="box_obj"></box-tag>
        </div>
    </body>
    <script src="js/vue.js"></script>
    <script>
    
        let boxTag = {
            props: ['box_obj'],
            template: `
            <div class="box">
                <img :src="box_obj.img_url" alt="">
                <p>
                    <span @click="btnClick">点击了{{ num }}下</span>
                    <p>{{ box_obj.img_title }}</p>
                </p>
            </div>
            `,
            data () { //data要定义为函数形式,函数就存在了作用域,这样就可以达到隔离性
                return {
                    num: 0
                }
            },
            methods: {
                btnClick () {
                    this.num += 1;
                }
            }
        };
    
    
        // 后台的数据
        let back_data = [
                {
                    img_url: 'img/001.jpg',
                    img_title: '野兽1'
                },
                {
                    img_url: 'img/002.jpg',
                    img_title: '野兽2'
                },
                {
                    img_url: 'img/003.jpg',
                    img_title: '野兽3'
                }
            ];
    
        new Vue({
            el: '#app',
            data: {
                box_data: back_data
            },
            components: {
                boxTag,
            }
        })
    </script>
    </html>
    数据父传子案例

      ##6-5、数据子传父

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            <h1>{{ title }}</h1>
            <sub-tag @send_val="recv_val"></sub-tag>
        </div>
    </body>
    <script src="js/vue.js"></script>
    <script>
        let subTag = {
            template: `
            <div>
                <input type="text" v-model="val">
                <button @click="changeTitle">修改</button>
            </div>
            `,
            data () {
                return {
                    val: ''
                }
            },
            methods: {
                changeTitle () {
                    if (!this.val) return;
    
                    // 如果有数据,将数据发生给父组件
                    this.$emit('send_val', this.val);
    
                    this.val = '';
                }
            }
    
        };
    
        new Vue({
            el: '#app',
            data: {
                title: '父组件标题'
            },
            components: {
                subTag
            },
            methods: {
                recv_val (val) {
                    this.title = val;
                }
            }
        })
    </script>
    </html>
    View Code

      ##7、Vue-CLI项目搭建

      ##7-1、环境搭建

    #1、安装node
            官网下载安装包,傻瓜式安装:https://nodejs.org/zh-cn/
    #2、安装cnpm
            npm install -g cnpm --registry=https://registry.npm.taobao.org
    #3、安装脚手架
            cnpm install -g @vue/cli
    #4、如果安装出现问题 可执行
            npm cache clean --force

      ##7-2、项目创建

    1、创建项目
        vue create 项目名
        // 要提前进入目标目录(项目应该创建在哪个目录下)
        // 选择自定义方式创建项目,选取Router, Vuex插件

    启动
    
    cnpm run serve / ctrl+c
    // 要提前进入项目根目录
    
    访问:
    http://localhost:8080/

      ##7-2、创建好的vue项目怎么移动到新的环境

    1、拷贝文件除了node_modules该文件夹,其余文件拷贝到新得环境中
    2、cmd进入新的项目目录,执行cnpm install  从新安装依赖
    3、通过pycharm打开新建的vue项目
    4、在pycharm中编辑该项目,点击edit编辑,新建(+号)服务、选择npm

    5、安装vue页面脚本
    如果没有提示安装的话 取setting中pluging

    6、安装完成重启pycharm

       ##7-3、认识项目

    node_modules:项目依赖
    
    public:公用文件
        favicon.ico:页面标签图标
        index.html:项目的唯一页面(单页面)
        
    src:项目开发文件目录
        assets:静态资源
            css|js|img
        components:小组件
            *.vue
        views:视图组件
            *.vue
        App.vue:根组件
        main.js:主脚本文件 程序入口文件
        router.js:路由脚本文件 - vue-router
        store.js:仓库脚本文件 - vuex
        
    *.xml|json|js:一系列配置文件
    README.md:使用说明
    import Vue from 'vue'  // node_modules下的依赖直接写名字
    import App from './App.vue'  // ./代表相对路径的当前目录,文件后缀军可以省略
    import router from '@/router.js'  // @ 代表src的绝对路径
    import store from './store'
    // 在main中配置的信息就是给整个项目配置
    // 已配置 vue | 根组件App | 路由 | 仓库
    // 以后还可以配置 cookie | ajax(axios) | element-ui
    
    Vue.config.productionTip = false;  // Tip小提示
    
    // 配置reset.css
    import '@/assets/css/reset.css'
    
    // new Vue({
    //   router,
    //   store,
    //   render: h => h(App)
    // }).$mount('#app')
    
    new Vue({
        el: '#app',
        router: router,
        store,
        // render: function (fn) {
        //     return fn(App)
        // }
        // 解释:function (h) {return 1} | (h) => {return 1} | h => 1
        render: readTemplateFn => readTemplateFn(App)
    });
    main.js
    template>
        <!-- 模板区域 -->
    </template>
    <script>
        // 逻辑代码区域
        // 该语法和script绑定出现
        export default {
            
        }
    </script>
    <style scoped>
        /* 样式区域 */
        /* scoped表示这里的样式只适用于组件内部, scoped与style绑定出现 */
    </style>
    .vue 文件模板

      ##7-4、项目功能

      ##路由功能

    {
        path: '/',
        name: 'home',
        // 路由的重定向
        redirect: '/home'
    }
    
    {
        // 一级路由, 在根组件中被渲染, 替换根组件的<router-view/>标签
        path: '/one-view',
        name: 'one',
        component: () => import('./views/OneView.vue')
    }
    
    {
        // 多级路由, 在根组件中被渲染, 替换根组件的<router-view/>标签
        path: '/one-view/one-detail',
        component: () => import('./views/OneDetail.vue'),
        // 子路由, 在所属路由指向的组件中被渲染, 替换该组件(OneDetail)的<router-view/>标签
        children: [{
            path: 'show',
            component: () => import('./components/OneShow.vue')
        }]
    }
    route.js
    <!-- router-link渲染为a标签 -->
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link> |
    <router-link :to="{name: 'one'}">One</router-link> |
    
    <!-- 为路由渲染的组件占位 -->
    <router-view />
    app.vue 根组件建立路由
    // router的逻辑转跳
    this.$router.push('/one-view')
    
    // router采用history方式访问上一级
    this.$router.go(-1)

      ##路由案例

    <template>
        <div>
            <h1 :class="{active:is_active}" @click="btnClick">owen组件</h1>
        </div>
    </template>
    
    <script>
        export default {
            data (){
                return {
                    is_active : false
                }
            },
            methods:{
                btnClick(){
                    this.is_active = !this.is_active
                }
            }
        }
    </script>
    
    <style scoped>
        .active{
            color: red;
        }
    </style>
    在components文件夹中新建OwenComponent.vue
    <!-- views/About.vue -->
    
    <template>
        <div class="about">
            <h1>This is an about page</h1>
            <h2>好</h2>
            
            <!-- 使用组件 -->
            <owen-comp></owen-comp>
            <OwenComp></OwenComp>
        </div>
    </template>
    <script>
        // import OwenComp from '../components/OwenComponent'
        import OwenComp from '@/components/OwenComponent'  // 导入组件,组件名随意
        export default {
            components: {
                OwenComp,  // 注册组件
            }
        }
    </script>
    在views文件夹About.vue文件中

     

    转载于:https://www.cnblogs.com/liangzhenghong/p/11329567.html

    展开全文
  • 最近有时间,整理一下Vue的知识点,很多都是面试常见的1、Vue的生命周期如果你能理解了这张图,也就对Vue的生命周期有了一个大致的了解。vue生命周期总共分为8个阶段 创建前/后,载入前/后,更新前/后,销毁前/后。...
  • Vue项目环境搭建1) 安装node官网下载安装包,傻瓜式安装:https://nodejs.org/zh-cn/2) 换源安装cnpm>: npm install -g cnpm --registry=...: cnpm install -g @vue/cli注:2或3终端安装失败时,可以清空 npm...
  • 本文是简单介绍vue.js以及js的数据绑定原理
  • Vue框架

    2017-11-16 01:02:00
    Vue框架 环境: windows python3.6.2 Vue的cdn: <script src="https://cdn.jsdelivr.net/npm/vue"></script> 本地Vue.js下载:https://cn.vuejs.org/v2/guide/installation.html Vue官网:...
  • python前后端分离-Vue框架

    千次阅读 2019-03-05 23:28:46
    1vue的基础 (1)引包 &lt;script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"&gt;&lt;/script&gt; (2)创建实例化对象 new Vue({ el:'#app',//目的地 data:{ msg:"...
  • 1 let 和const &lt;script type="text/script"&gt; //let声明的变量是块级作用域,不能重复声明 { let gkate=12; } console.log(a) &lt;/script&gt;...上面的代码表明...
  • 1.安装python虚拟环境包并新建一个环境 cmd窗口运行pip install virtualenvwrapper-win (linux下运行 pip install virtualenvwrapper ) 设置新建的虚拟环境所在路径(默认 C:\Users\Administrator\Envs) 打开...
  • 之前得到消息vue在GitHub已经超过react,成为第一大框架,让我们来看看以vue为基础的开发框架有哪些?Element(start-28128)饿了么前端推出的基于 Vue.js 2.0 的后台组件库,它能够帮助你更轻松更快速地开发 web 项目...
  • 作为一名使用Python的开发,想学习一下前端vue框架,本博客主要已Python的角度去和vue的一些功能进行对比,让学过Python的开发人员更容易上手vue框架! VUE VUE官网, VUE网上的介绍很多,这里就不在就不做过多介绍了,我们...
  • Django+Vue 框架

    2019-01-29 19:25:00
    2019独角兽企业重金招聘Python工程师标准>>> ...
  • 用vue-cli搭建vue框架

    2017-05-10 15:19:00
    2019独角兽企业重金招聘Python工程师标准>>> ...
  • Vue框架下的node.js安装教程 python服务器、php ->aphche、java ->tomcat、 iis -->它是一个可以运行JAVASCRIPTR 的运行环境 -->它可以作为后端语言(websocket \ ) --强大的包管理工具npm,可以...
  • 一、 背景在工作中我们经常须要构件一些基于web的...Django是Python体系下最成熟的web框架之一,由于Python语言的易用性和受众面广,Django框架也因其能够快速开发网站应用的特性成为了中小型网站开发框架首选。且...
  • 通过脚手架创建Vue框架项目以及模块的划分 搭建python语言的Django框架的项目为前端传递所需要的数据 创建好首页,商品模块,购物车模块,订单模块,个人中心模块 创建各个模块的路由,让各个...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 766
精华内容 306
关键字:

vue框架python

python 订阅
vue 订阅