Как использовать vue.js в expressjs с мопсом - PullRequest
Новая
       13

Как использовать vue.js в expressjs с мопсом

0 голосов
/ 11 октября 2018

Вот мой код, который я пробовал

В моем .pug 

extends layout

block content
  h1= title
  p Welcome to #{title}
  script(src='/javascripts/custom_vue.js')
  div(id="app")
    {{ message }}

custom_vue.js 

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})

ошибка: 

D:\xampp\htdocs\test\express\report\views\vue.pug:8:9 6| script(src='/javascripts/custom_vue.js') 7| <div id="app"> > 8| {{ message }} ---------------^ 9| </div> unexpected text "{{ me"
Error: D:\xampp\htdocs\test\express\report\views\vue.pug:8:9
    6|   script(src='/javascripts/custom_vue.js')
    7|     <div id="app">
  > 8|         {{ message }}
---------------^
    9|     </div>

unexpected text "{{ me"
    at makeError (D:\xampp\htdocs\test\express\report\node_modules\pug-error\index.js:32:13)
    at Lexer.error (D:\xampp\htdocs\test\express\report\node_modules\pug-lexer\index.js:58:15)
    at Lexer.fail (D:\xampp\htdocs\test\express\report\node_modules\pug-lexer\index.js:1304:10)
    at Lexer.advance (D:\xampp\htdocs\test\express\report\node_modules\pug-lexer\index.js:1364:15)
    at Lexer.callLexerFunction (D:\xampp\htdocs\test\express\report\node_modules\pug-lexer\index.js:1319:23)
    at Lexer.getTokens (D:\xampp\htdocs\test\express\report\node_modules\pug-lexer\index.js:1375:12)
    at lex (D:\xampp\htdocs\test\express\report\node_modules\pug-lexer\index.js:12:42)
    at Object.lex (D:\xampp\htdocs\test\express\report\node_modules\pug\lib\index.js:99:27)
    at Function.loadString [as string] (D:\xampp\htdocs\test\express\report\node_modules\pug-load\index.js:44:24)
    at compileBody (D:\xampp\htdocs\test\express\report\node_modules\pug\lib\index.js:86:18)

1 Ответ

0 голосов
/ 11 октября 2018

Мы используем vue.js с pug и любим его.

Pug нужно знать, в какой тип элемента вы хотите визуализировать это сообщение, просто добавьте div или span в началеline и все будет работать правильно: 

div {{message}}

То же самое произойдет, если без vue.js вы просто попытаетесь отобразить текст на странице.Это может привести к ошибке: 

div
  This is some text

Вы также можете использовать команду «Простой текст» (|), чтобы выполнить то, что вы хотите: 

| {{message}}

или 

div
  | This is some text

К вашему сведению, мы также используем встроенные компоненты с тегами сценария в отдельных файлах pug вместо интерфейса командной строки: 

script(type="text/x-template" id="my-component")
  div
    (html goes here)

script.
  var MyComponent= Vue.component({
    "template": '#my-component',
    <rest of the code goes here>
  });
...