vuejs学习(3)

本文初步学习一下vuejs提供的组件。我们做了一个列表的例子。

main.js

1
2
3
4
5
6
7
8
import Vue from 'vue'
import TodoList from './TodoList'

new Vue({
    el: '#app',
    template: '<TodoList/>',
    components: { TodoList }
});

TodoList.vue

<template>
<div id="todolist">
    <ul>
        <li>父容器1</li>
        <li>父容器2</li>
    </ul>
    <ul>
        <TodoItem todomessage="子容器1"></TodoItem>
        <TodoItem todomessage="子容器2"></TodoItem>
    </ul>
</div>
</template>

<script>
import TodoItem from './components/TodoItem'

export default {
    components: {
        TodoItem
    }
}
</script>

<style scoped>
li{
    color: blue;
}
</style>

components/TodoItem.vue

<template>
    <li>{{todomessage}}</li>
</template>

<script>
export default {
    props: ['todomessage'],
}
</script>

<style scoped>
li{
    color: red;
}
</style>

在上述的代码中,我们需要学到以下几个问题:

  1. 父组件在components里引入了子组件。
  2. 父组件通过设定子组件中props涉及到的变量,为子组件传值。
  3. 子组件中的css部分要加上scoped,表明该段样式只在这个组件中有效,否则设定样式可能会无效,或者影响其他组件的样式。

下图是加上scoped

https://github.com/longlongpicture/myblogpicture/raw/master/vue-component-1.PNG

下图是不加scoped

https://github.com/longlongpicture/myblogpicture/raw/master/vue-component-2.PNG

vuejs学习(2)

本文初步学习一下vuejs提供的基本指令v-model、v-on:click、v-bind:title、v-if和v-for。

在文章 https://codinglonglong.github.io/posts/vuejsxue-xi-1/ 的基础上,我们修改了App.vue,代码如下。

<template>
<div id="myapp">
    <input v-model="name">
    <p>Hello, {{name}}</p>
    <button v-on:click="sayhello" v-bind:title="tooltip">sayhello</button>
    <div class="message">
        <button v-on:click="toggleshow">切换显示</button>
        <span class="content" v-if="flag">一条消息</span>
    </div>
    <select>
        <option v-for="week in weeks">{{week}}</option>
    </select>
</div>
</template>

<script>
export default {
    data: function () {
        return {
            name: "龙龙龙",
            tooltip: "点击我问好...",
            flag: true,
            weeks: ["星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"],
        }
    },
    methods: {
        sayhello: function () {
            alert(this.name);
        },
        toggleshow: function(){
            if(this.flag){
                this.flag = false;
            }else{
                this.flag = true;
            }
        }
    }
}
</script>

<style>
p {
    font-size: 30px;
    color: blue;
}
.message {
    display: block;
    width: 100px;
    margin-top: 50px;
}
.content{
    color: green;
}
</style>

通过这段代码,可以看出:

  1. v-model 用来通过输入控件同步消息的显示。
  2. v-on:click 用来设定鼠标单击事件,事件函数定义在methods里。
  3. v-bind:title 用来设定鼠标放在某元素上显示的信息。
  4. v-if 用来根据某一变量的值决定元素的显示与否。
  5. v-for 用来绑定一系列数据。

vuejs提供的类似指令还有很多,我们后面接着学习。

Exception in thread "main" java.util.zip.ZipException: error in opening zip file

在参考 https://reactnative.cn/docs/0.40/getting-started.html 配置react-native的过程中,发生了如下错误:

Starting JS server...
    Building and installing the app on the device (cd android && ./gradlew installDebug)...
    Unzipping /home/long/.gradle/wrapper/dists/gradle-2.4-all/6r4uqcc6ovnq6ac6s0txzcpc0/gradle-2.4-all.zip to /home/long/.gradle/wrapper/dists/gradle-2.4-all/6r4uqcc6ovnq6ac6s0txzcpc0
    Exception in thread "main" java.util.zip.ZipException: error in opening zip file
        at java.util.zip.ZipFile.open(Native Method)
        at java.util.zip.ZipFile.<init>(ZipFile.java:219)
        at java.util.zip.ZipFile.<init>(ZipFile.java:149)
        at java.util.zip.ZipFile.<init>(ZipFile.java:163)
        at org.gradle.wrapper.Install.unzip(Install.java:159)
        at org.gradle.wrapper.Install.access$500(Install.java:26)
        at org.gradle.wrapper.Install$1.call(Install.java:69)
        at org.gradle.wrapper.Install$1.call(Install.java:46)
        at org.gradle.wrapper.ExclusiveFileAccessManager.access(ExclusiveFileAccessManager.java:65)
        at org.gradle.wrapper.Install.createDist(Install.java:46)
        at org.gradle.wrapper.WrapperExecutor.execute(WrapperExecutor.java:126)
        at org.gradle.wrapper.GradleWrapperMain.main(GradleWrapperMain.java:61)
Could not install the app on the device, read the error above for details.
Make sure you have an Android emulator running or a device connected and have
set up your Android development environment:
https://facebook.github.io/react-native/docs/android-setup.html

解决方法:

https://services.gradle.org/distributions 下载完整的gradle-2.4-all.zip文件,放到 C:\Users\long\.gradle\wrapper\dists\gradle-2.4-all\6r4uqcc6ovnq6ac6s0txzcpc0 目录中即可正常运行 react-native run-android。

放张成功之后的截图:

https://github.com/longlongpicture/myblogpicture/raw/master/react-native-1.PNG

vuejs学习(1)

本文初步学习如何使用vue-cli建立一个简单的网页组件。

  1. 参考 https://cn.vuejs.org/v2/guide/installation.html 安装好vue和vue-cli。

  2. 用vue创建一个简单的项目,删除已有src目录中的文件。

  3. 找到index.html如下,不用改动。

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>test</title>
    </head>
    <body>
        <div id="app"></div>
        <!-- built files will be auto injected -->
    </body>
    </html>
    

    这里应该留意到已经包含一个id是app的div,未来要写的代码经过编译之后,会放在这个div的位置,而 <div id="app"></div> 会被替换掉。

  4. 在src目录下新建main.js,这是整个网站代码的入口,如下。

    1
    2
    3
    4
    5
    6
    7
    8
    import Vue from 'vue'
    import App from './App'
    
    new Vue({
        el: '#app',
        template: '<App/>',
        components: { App }
    })
    

    这里应该注意到,el,也就是element,绑定的是前面index.html中的 <div id="app"></div> ,而该位置对应的模板则是来自名为App的组件,也就是将App组件渲染到id为app的div的位置上。

  5. 在src目录下新建App.vue,这是网站的一个组件,可以多次反复使用,代码如下。

    <template>
        <div id="myapp">
            <p>Hello, {{Name}}</p>
            <button v-on:click="sayhello">sayhello</button>
        </div>
    </template>
    
    <script>
    export default {
        data: function () {
            return {
                Name: "龙龙龙"
            }
        },
        methods: {
            sayhello: function () {
                alert(this.Name);
            }
        }
    }
    </script>
    
    <style>
    p {
        font-size: 30px;
        color: blue;
    }
    </style>
    

    通过这段代码,可以看出:

    1. 一个vue组件由三大部分组成,<template></template>(组件模板),<script></script>(组件脚本),<style></style>(组件样式)。
    2. 组件样式部分就是最基本的CSS。
    3. 组件脚本部分被export default{}包围,这个例子中给出了data(数据)和methods(方法),可以学到如何绑定数据和如何添加自定义函数。
    4. 组件模板部分必须被一个根div包围,在本例中是 <div id="myapp"></div>。
    5. 按钮点击事件的实现采用 <button v-on:click="sayhello">sayhello</button>。

总结

这个简单的例子一共涉及了以下几个问题:

  1. vue组件的基本格式;
  2. 如何加样式;
  3. 如何加自定义函数;
  4. 如何做数据绑定;
  5. 如何把组件和网页联系在一起。

后面我们将继续尝试多个组件的网站怎么写。

Win10 home版关闭hyper-v

在win10的home版中,安装Android Studio提供的haxm,会出现死机的现象,这是由于haxm与hyper-v冲突。而home版无法通过“启用或关闭Windows功能”来关闭hyper-v。这时可以通过如下方法关闭hyper-v。

  1. 管理员身份运行命令提示符cmd

    >> bcdedit /copy {current} /d "Windows10 no Hyper-V
    >> bcdedit /set {XXX} hypervisorlaunchtype OFF
    

    注意XXX的部分是上一步的输出结果。

  2. 重启Win10,选择“Windows10 no Hyper-V”,即可进入没有Hyper-V的win10系统。

注意

如果要安装haxm,还需要注意以下两点:

  1. 别忘了在BIOS里打开虚拟化。
  2. haxm不仅会与hyper-v冲突,与杀毒软件Avast也会冲突,安装haxm之前先卸载掉Avast才行。

Android Studio连接Droid4X调试APP

Android Studio用内置的虚拟机连i7的本都要跑半天,外接手机的话又太费手机,所以我们可以采用第三方Android虚拟机的方式来调试程序,在这里我们使用的是Droid4X。

  1. 安装VirtualBox。

  2. 安装Droid4X。

  3. 添加adb到系统路径,我的在

    C:\Users\long\AppData\Local\Android\sdk\platform-tools
    
  4. 连接adb到Droid4X。

    >> adb connect 127.0.0.1:26944
    

    出现

    * daemon started successfully *
    
  5. 启动调试即可。