1、v-model 数据双向绑定指令

以一个简易的计算器来讲解下vue中的数据双向绑定，示例中表单控件都使用了v-model指令来绑定变量，当我们在input控件中输入新的数字后，h2标签中可以观察到内容发生了对应的变化，这说明v-model绑定的变量在输入新值后同时也跟着变化了，而在最开始渲染的页面上我们也看到了input控件中有初始值，初始值正是绑定变量的初始值，由此可以看出使用v-model指令实现了数据的双向绑定

<html>
<hred>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width,user-scalable=no,initial-scale=1.0, maximun-scale=1.0, minimun-scale=1.0">
    <script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
</hred>
<div id="app">
    <h3>{{num1}} {{type}} {{num2}} = ?</h3>
    <input type="text" v-model="num1" />
    <select v-model="type">
        <option value="">请选择</option>
        <option value="+">+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
    </select>
    <input type="text" v-model="num2" />
    <input type="button" @click="calc" value="=">
    <input type="text" v-model="result" />
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: "#app",
        data: {
            num1: "1",
            num2: "2",
            type: "+",
            result: "3"
        },
        methods: {
            calc() {
                this.result = eval('parseInt(this.num1)' + this.type + 'parseInt(this.num2)')
            }
        }
    })
</script>

</html>

总结：

① v-model指令作用于表单控件元素

② v-model在select控件中的使用，指令只需绑定在select元素上即可

③ eval函数是执行一段字符串，如果字符串是一个表达式则执行表达式，如果字符串是一段脚本，则执行脚本

2、vue 在 chrome调试工具 vue-devtools

vue-devtools主要用来审查和调试vue应用，它可以观察到vue中数据的变化，更好的观察组件方法

2.1、 vue-devtools安装

在不能访问Google插件库的情况下快速安装vue-devtools插件

① 打开链接插件猫找到vue-devtools下载

② 在chrome浏览器中找到【更多工具】->【扩展程序】->【开启开发者模式】->【将下载的crx后缀的文件拖到浏览器中】

③ 修改配置文件C:\Users\Administrator\AppData\Local\Google\Chrome\User Data\Default\Extensions\nhdogjmejiglipccpnnnanhbledajbpd\6.1.4_0\manifest.json的persistent属性，修改为true

④ 在chrome浏览器中打开一个vue项目文件，F12可以在元素，源代码栏后面多出了一栏vue，非vue应用项目F12是不会有vue栏

⑤ 在vue插件中找到data，这时我们再去操作示例中的计算器，可以观察vue插件中data各项变量的变化了

2.2、vue-devtools 错误处理

在浏览器安装vue-devtools插件后还显示错误

Vue.js is detected on this page. Devtools inspection is not available because it’s in production mode or explicitly disabled by the author

这是因为vue.js引用的是发布版也就是min版本，只要将发布版本改成开发版本即可，引用非min版本的vue.js