Question

我正在尝试学习Vue.JS，而我所制作的组件并未在页面上呈现。这是我的组成部分：

import Vue from 'vue'

const card = new Vue({
  el: '#card',
  data: {
    title: 'Dinosaurs',
    content: '<strong>Dinosaurs</strong> are a diverse group of animals 
from the clade <em>Dinosauria</em> that first appeared at the Triassic 
period.'
  }
})

这是我的HTML：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Vue Practice</title>
  </head>
  <body>
    <div id="card">
      <header>{{ title }}</header>
      <div v-html="content"></div>
    </div>
    <script src="bundle.js"></script>
  </body>
</html>

这是package.json（我意识到大多数依赖项都属于devDependencies）：

    {
      "name": "vue-practice",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "bundle": "browserify -t babelify -t vueify -e main.js > 
                   bundle.js",
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "keywords": [],
      "author": "",
      "license": "ISC",
      "dependencies": {
        "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
        "babelify": "^7.3.0",
        "browserify": "^14.4.0",
        "vue": "^2.4.2",
        "vueify": "^9.4.1"
      },
      "devDependencies": {}
    }

当我在浏览器中加载index.html时，它呈现的全部是{{title}}，我没有收到任何错误。任何解释为什么会发生这种情况将不胜感激！

Answer 1

select top 10 t.* from ((select top 10 t.*, 0 as which from t) union all (select t.*, v.n from (values (1), (2), (3), (4), (5), (6), (7), (8), (9), (10)) v(n) left join t on 0 = 1 ) ) t order by which; only transforms computed files, if you are going to use templating in your data: { hashtags: [] }, computed: { filteredHashtags () { var defaultHashtags = [ '#hr', '#acc', '#sales' ]; var fHashtags = _.chain( messages ) .pluck( 'hashtags' ) .flatten() .map( function ( tag ) { return tag && tag.trim() ? '#' + tag : null; }) .filter( Boolean ) .value(); fHashtags = _.union( fHashtags, defaultHashtags ); return data.hashtags = fHashtags; } } then you need Vue compiler in order to compile the template in the browser (https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only).

A good way to have things like that covered is to use a vueify, if you are using Browserify there is one: https://github.com/vuejs-templates/browserify

But as you have almost everything up, you can only add what's missing for the compiler package, as stated in "Runtime + Compiler vs. Runtime-only" - "Browserify" section in Vue guide.

Add to your *.vue:

index.html

That will tell Browserify to use the full (also called standalone) Vue build on browser.

Another way is to not use templates in vuejs-template but instead in a main component, like package.json, for that you check out the template I linked above, it does it out of the box.

简单的Vue组件无法呈现

1 个答案: