一、今晚遇到一个问题，就是不能直接在 html 直接调用 js 代码的问题

二、会出现如下错误：

    Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-eval'". Either the 'unsafe-inline' keyword, a hash ('sha256-    vKuX0yKlIAX3ZzZ9/PIUq7x1z425uZLu4glsP+4fqXM='), or a nonce ('nonce-...') is required to enable inline execution.

三、解决方法，就是将 js 代码写成单独的文件，然后包含进去即可。

    # index.html

    <!DOCTYPE html>

    <html>

      <head>

        <script src="js/vue.min.js"> </script>

      </head>

      <body>

        <div id="chen_test_id1">

          <p>{{ message }}</p>

        </div>

        <script src="js/test.js"> </script>

      </body>

    </html>


    // js/test.js

    src="js/vue.min.js">

    new Vue({

      el: '#chen_test_id1',

      data: {

        message: 'Hello Vue.js!'

      }

    })

Chrome 调用vue.js 记录的更多相关文章

  1. iOS 或者Android调用vue.js 里面的方法

    1.原生调用vue.js 某个vue组件下的方法. 比如**.vue里面有个这样的方法: 如果这样的话,在iOS或者Android里面是调用不了这个ajax方法的. 需要在**.vue (我的版本是v ...

  2. chrome调试vue.js的插件：vue.js devtools

    1.什么是vue.js devtools? vue.js devtools是chrome的一款插件,用来调试vue的一款神器. 2.为什么下载vue.js devtools? 由于vue是数据驱动的, ...

  3. Chrome安装Vue.js devtool F12无效

    要安装 vue-devtools-4.1.4_0 链接: https://pan.baidu.com/s/1aeUxKJEUDW0U_i6uuAZFvQ 提取码: 4btc vue-devtools- ...

  4. vue-axios当只调用vue.js又需要axios请求多时

    可以将axios方法封装一个函数 (function () { ASK = { get:function (url,data,succFun,errFun) { axios.get(url,{ par ...

  5. oc 与 js交互之vue.js

    - .vue.js 调用oc的方法并传值 vue.js 组件中调用方法: methods: {     gotoDetail(item){         //此方法需要在移动端实现,这里可以加入判断 ...

  6. Vue.js模板语法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 每天记录一点：NetCore获得配置文件 appsettings.json vue-router页面传值及接收值 详解webpack + vue + node 打造单页面(入门篇) 30分钟手把手教你学webpack实战 vue.js+webpack模块管理及组件开发

    每天记录一点:NetCore获得配置文件 appsettings.json   用NetCore做项目如果用EF  ORM在网上有很多的配置连接字符串,读取以及使用方法 由于很多朋友用的其他ORM如S ...

  8. Vue.js中，如何自己维护路由跳转记录？

    在Vue的项目中,如果我们想要做返回.回退操作时,一般会调用router.go(n)这个api,但是实际操作中,使用这个api有风险,就是会让用户跳出当前应用,因为它记录的是浏览器的访问记录,而不是你 ...

  9. vue.js学习记录

    vue.js学习记录 文章已同步我的github笔记https://github.com/ymblog/blog,欢迎大家加star~~ vue实例 生命周期 beforeCreate:不能访问thi ...

随机推荐

  1. 像网页开发一样调试ios程序

    PonyDebugger https://github.com/square/PonyDebugger

  2. 喜马拉雅FM接入

    最近有考虑接入,但是一方面由于沟通不畅等,另一方面没有浏览开发者协议,品牌规范等,多走了很多弯路,所以记下接入的注意事项和关键点 一. 接入前准备工作 喜马拉雅FM开放平台地址:http://open ...

  3. python3 元类编程的一个例子

    [引子] 虽然我们可以通过“class”语句来定义“类”,但是要想更加细粒度的控制“类”的创建,要使用元类编程才能实现. 比如说我们要实现这样的一个约束.所有项目中用到的类都应该要为它定义的方法提供文 ...

  4. RabbitMQ 消费端 Client CPU 100%的解决办法

    Func<bool> run = () => { try { using (IConnection conn = cf.CreateConnection()) { using (IM ...

  5. JDK1.5新特性，基础类库篇，System类

    一. 背景 System.getenv(String)方法继续有效:增加了新的System.getenv()方法,返回保存环境变量的Map<String,String>. 同时增加了以纳秒 ...

  6. 【八】注入框架RoboGuice使用:(Your First Injected Fragment)

        上一篇我们简单的介绍了一下RoboGuice的使用([七]注入框架RoboGuice使用:(Your First Custom Binding)),今天我们来看下fragment的注解     ...

  7. Win 10服务智能化有什么依据？

            在今年7月29日之后.Win 10操作系统就叫"视窗服务"了,当中有没有"智能'因素呢?能不能叫做"智能操作系统"呢?为什么?什么是& ...

  8. Subversion代码提交中的org.apache.subversion.javahl.ClientException: svn: E200007: Commit failed异常解决

    : 在切换subversion服务器地址之后,发生的无法正确提交代码的问题org.apache.subversion.javahl.ClientException: svn: E200007: Com ...

  9. 【React Native开发】React Native应用设备执行(Running)以及调试(Debugging)(3)

    ),React Native技术交流4群(458982758),请不要反复加群.欢迎各位大牛,React Native技术爱好者加入交流!同一时候博客左側欢迎微信扫描关注订阅号,移动技术干货,精彩文章 ...

  10. JAVA线程池任务数大小设置

    线程池究竟设成多大是要看你给线程池处理什么样的任务,任务类型不同,线程池大小的设置方式也是不同的. 任务一般可分为:CPU密集型.IO密集型.混合型,对于不同类型的任务需要分配不同大小的线程池. CP ...