vue(一)—安装&实例创建&挂载点&模板

悠悠 2022-01-29 10:41 296阅读 0赞

1、 安装

*  首先去Vue官网菜单栏的学习选项中下载vue，可以下载开发板或者是生产版
 *  将下载好的vue.js文件放入要做项目的的目录下
 *  通过< script>标签引入文件，就可以使用了

2、实例、模板、挂载点  
代码如下

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bmRheTk3_size_16_color_FFFFFF_t_70]  
上面的方式就类似于下面的原声JS的写法  
![在这里插入图片描述][20190521171417783.PNG]  
3、template属性  
上面的模板可以在vue实例中的template属性中表示出来的，如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bmRheTk3_size_16_color_FFFFFF_t_70 1]  
vue基础知识点:  
[一、vue安装&实例创建&挂载点&模板][vue]  
[二、指令详细使用及其区别&实例属性][Link 1]  
[三、组件与组件的拆分][Link 2]  
[四、Vue组件之 d i s p a t c h 和 dispatch和 dispatch和broadcast][Vue_ d i s p a t c h _ dispatch_ dispatch_broadcast]  
[五、vue组件之祖孙传后代provide和inject][vue_provide_inject]  
[六、Vue组件之详细理解并使用props和$emit()  
][Vue_props_emit_]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bmRheTk3_size_16_color_FFFFFF_t_70]: /images/20220129/19b5ce4427d5497b9f37f6e9338a9365.png
[20190521171417783.PNG]: /images/20220129/4279bc208f9c4debb58945ca6e415f32.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bmRheTk3_size_16_color_FFFFFF_t_70 1]: /images/20220129/1121e733578146a3b872c73ac27c92e0.png
[vue]: https://blog.csdn.net/Sunday97/article/details/90413669?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522160008429819724839855179%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=160008429819724839855179&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_v2~rank_blog_default-2-90413669.pc_v2_rank_blog_default&utm_term=vue&spm=1018.2118.3001.4187
[Link 1]: https://blog.csdn.net/Sunday97/article/details/90447521?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522160008433519724839224940%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=160008433519724839224940&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_v2~rank_blog_default-3-90447521.pc_v2_rank_blog_default&utm_term=vue&spm=1018.2118.3001.4187
[Link 2]: https://blog.csdn.net/Sunday97/article/details/90578330?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522160008433519724839224940%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=160008433519724839224940&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_v2~rank_blog_default-1-90578330.pc_v2_rank_blog_default&utm_term=vue&spm=1018.2118.3001.4187
[Vue_ d i s p a t c h _ dispatch_ dispatch_broadcast]: https://blog.csdn.net/Sunday97/article/details/91443685?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522160008433519724839224940%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=160008433519724839224940&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_v2~rank_blog_default-6-91443685.pc_v2_rank_blog_default&utm_term=vue&spm=1018.2118.3001.4187
[vue_provide_inject]: https://blog.csdn.net/Sunday97/article/details/91358599?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522160008433519724839224940%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=160008433519724839224940&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_v2~rank_blog_default-7-91358599.pc_v2_rank_blog_default&utm_term=vue&spm=1018.2118.3001.4187
[Vue_props_emit_]: https://blog.csdn.net/Sunday97/article/details/91356575?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522160008433519724839224940%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=160008433519724839224940&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_v2~rank_blog_default-8-91356575.pc_v2_rank_blog_default&utm_term=vue&spm=1018.2118.3001.4187