記事のディレクトリ
1.Vueの概要
- Vue：プログレッシブJavaScriptフレームワーク
声明式渲染→组件系统→客户端路由→集中式状态管理>项目构建
2.Vueの基本的な使用法
Vueを使用する基本的な手順
- ラベル記入データを提供する必要があります
- vue.jsライブラリファイルを紹介します
- Vue構文テンプレートを使用する
- Vueから提供されたデータをラベルに記入します
1.データを入力するためのラベルを提供します
<div id="app">
<div></div>
</div>
2.vue.jsライブラリファイルを紹介します
<script src="js/vue.js"></script>
3.Vueの文法書き込み機能を使用する
<script type="text/javascript">
new Vue({
el: '#app',
data: {
msg: 'hello world'
}
})
</script>
4.ラベルにvueから提供されたデータを入力します
<!-- 1、提供标签用于填充数据 -->
<div id="app">
<!-- 4、将vue提供的数据填充到标签里 使用插值表达式{
{
}}，作用就是将数据填充到指定的标签的位置。 -->
<div>{
{
msg}}</div>
<div>{
{
1 + 1}}</div>
</div>
- 完全なコードは次のとおりです
<div id="app">
<!-- {
{
}}代表插值表达式用法 -->
<!-- 把数据填充到html中，可以进行计算操作 -->
<div>{
{
meg}}</div>
<div>{
{
3+2}}</div>
<div>{
{
meg+'....'+123}}</div>
</div>
<script src="js/vue.js"></script>
<script>
// Vue代码运行原理分析，概述编译过程的概念（Vue语法->原生语法），就是Vue代码经过Vue框架变成了原生js代码。
// 创建一个Vue的变量vm，存储Vue的实例，提供一个参数，是对象形式的，并且这个对象包含两个重要的属性el、data。
// Vue所做的工作也就是把数据填充把页面的标签里面。
var vm = new Vue({
/*el：元素的挂载位置，值可以是CSS选择器或者DOM元素，挂载就是将数据关联到页面的某个标签上。 */
el: '#app', //el是告诉Vue把数据填充到那个位置，这里通过id选择器进行绑定到那个标签。
data: {
/* data：绑定数据（值是一个对象）用于数据提供 */
meg: 'Hello vue!'
}
})
</script>
3.Vueコードの動作原理
